微信小程序父传子,子传父

228 阅读1分钟

父传子

在你的父文件夹下的.json文件下引入子组件 image.png 然后在父组件里 以标签的形式写入子组件,传值的话在标签上自定义属性名,属性值要以双花括号包住 image.png

  • 然后在子组件中使用Component构造器,他在Page外面使用
  • Component构造器可用于定义组件,调用Component构造器时可以指定组件的属性、数据、方法等。
  • 在Component的properties中接收父组件传过来的数据 image.png 这样子组件就能接受的父组件传过来的值了在子组件的wxml中用双花括号引用就ok了

image.png

这里我的子组件中的方法都写在了Component构造器中,用methods包裹住

image.png

子传父

子传父运用了triggerEvent()
自定义组件触发事件时,需要使用 triggerEvent 方法,指定事件名、detail对象和事件选项。

this.triggerEvent("up",res) //第一个是自定义事件名,第二个是要传递的值(可以为空)

  • 然后在父组件中的子组件标签中绑定自定义事件
  <music
         id='music'
         list='{{list}}'
         bind:up="_up" 
            >
    </music>

在父组件中的js文件里获取子组件传过来的值