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可以拿到子组件传过来的值