slot子组件
<!--pages/user/user.wxml--> <header title='{{title}}'></header> {{title}} <footer> <button>我是footer子组件里的按钮</button> </footer>在footer子组件里slot调用
<!--components/footer/footer.wxml--> <view class="footer" hover-class="none" hover-stop-propagation="false"> footer组件 </view> <slot></slot>**父组件调用子组件的方法 1、调用子组件的时候定义一个id <header id="header"></header>
<!--pages/user/user.wxml--> <!-- 此处定义一个id是为了在父组件中执行子组件的方法用 --> <header title='{{title}}' id='header'></header> {{title}} <footer> <button>我是footer子组件里的按钮</button> </footer> <br /> <button bindtap='getChildRun'>获取子组件的ChildRun方法</button>2、父组件获取子组件的实例 var header = this.selectComponent("#header")
// pages/user/user.js Page({ /** * 页面的初始数据 */ data: { title: '用户组件title' }, getChildRun () { var header = this.selectComponent('#header') // 父组件里执行子组件的方法 header.childRun() // 获取子组件中data数据 console.log(header.data.msg) }, /** * 生命周期函数--监听页面加载 */ onLoad: function (options) { } })3、header.方法名 调用子组件里面的方法 header.data.msg父组件里面直接获取子组件的数据
// components/header/header.js Component({ /** * 组件的属性列表 */ properties: { // title: String // 如果没传值，就让显示默认值 title: { type: "String", value: "头部" } }, /** * 组件的初始数据,绑定的属性不要与properties里重复 */ data: { msg: '获取组件data值' }, /** * 组件的方法列表 */ methods: { run () { console.log('run') console.log(this.data.msg); // 重新设定msg的值 this.setData({ msg: '改变后的值' }) }, childRun () { console.log('我是子组件的childRun方法') } } })**子组件执行父组件里面的方法
<!--components/footer/footer.wxml--> <view class="footer" hover-class="none" hover-stop-propagation="false"> footer组件 </view> <slot></slot> <button bindtap='getfather'>触发父组件的run方法</button> // components/footer/footer.js Component({ /** * 组件的属性列表 */ properties: { }, /** * 组件的初始数据 */ data: { }, /** * 组件的方法列表 */ methods: { getfather () { this.triggerEvent('parent', '子组件的数据') } } })1、子组件给父组件传值
this.triggerEvent('parent', 数据, 参数）
<!--pages/user/user.wxml--> <!-- 此处定义一个id是为了在父组件中执行子组件的方法用 --> <header title='{{title}}' id='header'></header> {{title}} <!-- <footer> <button>我是footer子组件里的按钮</button> </footer> --> <footer bindparent='parentrun'></footer> <br /> <button bindtap='getChildRun'>获取子组件的ChildRun方法</button>父组件中绑定parent，执行parentrun方法，parent事件是前面子传父定义的parent,可以任意起名，但是bind+任意名时，要一致。 2、 <footer bindparent="parentrun" />
// pages/user/user.js Page({ /** * 页面的初始数据 */ data: { title: '用户组件title' }, getChildRun () { var header = this.selectComponent('#header') // 父组件里执行子组件的方法 header.childRun() // 获取子组件中data数据 console.log(header.data.msg) }, parentrun (e) { console.log(e.detail) console.log('我是父组件的run方法') }, /** * 生命周期函数--监听页面加载 */ onLoad: function (options) { } })通过e.detaill可以拿到子组件传过来的值
