小程序实战(五)-父子组件传参

一、创建组件

点击 “新建 Component” 创建一个组件。 创建后的文件长这样：

另外再创建一个父组件：

二、在父组件中使用组件

1. 在parent.json中引入子组件：

{
  "component": true,
  "usingComponents": {
    "child": "../child/child"
  }
}

2. 在parent.wxml中使用子组件

<child />

三、父向子传参

1. 在parent.wxml中赋值变量：

<child paramsPtoC="我是父组件给子组件的参数"/>

2. 在child.js中接收这个参数：

Component({
  properties: {
    paramsPtoC: String
  },
})

3. 在child.wxml中使用这个参数：

<view>{{paramsPtoC}}</view>

结果：

四、子向父传参

1. 在parent.wxml中绑定自定义事件：

<child bind:myevent="handleEvent"/>

2. 在parent.js中定义事件绑定函数：

handleEvent(e) {
    this.setData({
        paramsCtoP: e.detail. paramsCtoP
    })
}

3. 在child.wxml中增加一个触发的按钮：

<button bindtap="clickBtn">向父组件传参</button>

4. 在child.js中抛出自定义事件：

methods: {
    clickBtn() {
        this.triggerEvent('myevent', {paramsCtoP: '我是子组件给父组件的参数'})
    }
}

结果：

<关于我们>

我们是来自帝都的一枚前端程序猿 + 一枚前端程序媛。

这里发布的文章是我们对学习内容的总结，预计会每周至少会更新一篇。

目前我们学习计划是： 小程序实战 => vue 进阶用法 => vue 原理 => css 基础 => es6 => js 深入

另外，工作中用到的一些技术和完成的功能，我们也会及时总结更新在这里

如文章有错误或表述不清晰，欢迎各位留言反馈~~