一:新建文件
- (1)新建自定义组件文件
-
在根目录新建components文件夹,然后右键新建自定义组件目录,最后右键新建Component
新建自定义组件
-
- (2)组件json文件配置
{
"component": true 这一组文件设为自定义组件
}
- (3)组件wxml编写
<!-- 子组件 -->
<view>我是子组件</view>
- (4)组件wxss文件,因为无法直接使用全局样式,需要导入
/* 自定义组件 */
@import "../../app.wxss";
- (5)导入自定义组件
- (5.1)在父组件json文件的usingComponents中导入组件
{ "usingComponents": { "submit-bar":"../../components/submit-bar/index" 类似Vue中的导入组件:import xxx from '组件路径' } }
- (5.2)在父组件wxml文件中以组件名作为标签使用组件
<submit-bar></submit-bar>
效果图
二、父子组件通信
(与Vue父子组件传参原理一样,学过Vue的盆友更容易上手哦)
1、父传子
- (1)在父组件中的子组件标签添加属性,给子组件传递数据
<submit-bar totalMoney="{{totalMoney}}" ></submit-bar>
- (2)子组件在js中通过properties接收,可以指定接收数据类型
properties: {
totalMoney: Number
}
2、子传父
- (1)在父组件的子组件标签自定义事件,传给子组件
<submit-bar bind:submit="submit" ></submit-bar>
- (2)子组件用
this.triggerEvent('父组件自定义事件', '要传递的参数')
,触发父组件传过来的自定义事件
this.triggerEvent("submit", 'Hello Grayly')
- (3)第二步执行后,父组件自定义事件绑定的函数就会执行,同时接受子组件传过来的数据
(在event.detail中可得到子组件传过来的参数)
submit(event) {
console.log(event);
},
父组件接收到子组件传过来的参数