使用
1.创建与pages同级目录components, 用来存放组件，每个组件对应一个文件夹，文件夹内新建Component
2.在页面文件夹下的json文件中引入所需组件,可以自定义一些较有语义化的名字
// index.json
{
"usingComponents": {
"first": "/components/first/first",
"second": "/components/second/second"
}
}
3.在页面内引入使用组件
// index.wxml
<view class="box">
<first></first>
<second></second>
</view>
父子组件传值
注意：
在 bindtap="getMsg"中， bindtap为触发事件的方式，getMsg为 被触发事件。
-
父传子
- 在页面内的组件标签上进行传值，比如这里我向first组件传递了一个color
// index.wxml
<view class="box">
<first color="red"></first>
</view>
- 在子组件的js文件内接收,具体在properties对象内。type设置类型，value设置默认值
接收到值后，它会被添加到data中，我们就可以正常通过插值语法{{ }}调用它
// first.js
Component({
properties: {
color: {
type: 'string',
value: ''
}
},
})
-
子传父
- 我们先在子组件内定义一个方法(toFather)，按钮点击时执行，也是传值的开始
// first.wxml
<view class="first">
<button bindtap="toFather">子传父</button>
</view>
- toFather的执行要在methods内，通过triggerEvent(官方提供的方法)自定义一个触发事件(类似于bindtap), 并且可以传递一个参数(只能传递一项，可以是数组，对象，字符串等)
// first.js
methods: {
toFather() {
// 为父组件自定义函数
this.triggerEvent('getMsg', 110)
}
}
- 在父组件内利用自定义的触发事件执行自定义方法,是在该组件标签上执行噢,注意自定义方法名要为: bindxxx, 如我们定义的要写为bindgetMsg
// index.wxml
<view class="box">
<first bindgetMsg="getSonMsg"></first>
</view>
- getSonMsg定义在父组件的js文件内, 这样就可以获取到子组件传来的数据了，下方代码中的e就是我们在创建自定义触发事件时传递的参数
Page({
data: {},
getSonMsg(e) {
console.log(e) //110
}
})
插槽
作用：如不同页面内的navbar结构类似，我们就可以将相同的部分写为固定的，不同的样式通过插槽来修改
用法：
1.在组件js文件内，配置支持插槽
Component({
options: {
multipleSlots: true // 在组件定义时的选项中启用多slot支持
}
})
2.在组件内的wxml文件内，写入插槽
// first.wxml
<slot name="head"></slot>
view
<slot name="foot"></slot>
3.在父组件内的子组件标签内调用
// index.html
<first>
<view slot="head">123</view>
<view slot="foot">123</view>
</first>
