微信小程序开发之向组件传值的三种方式

一. 直接传值

向组件custom-component传值的页面

<!--index.wxml-->
<custom-component my-value="hello" />

或者，可以是

<!--index.wxml-->
<custom-component myValue="hello" />

其中，设置了一个名为my-value/myValue的属性，这个属性会直接传给组件，但是，组件要先宣布一个变量。myValue，无论组件的属性名是设置为“my-value”，还是"myValue"，最终接收变量名字都是myValue。所以，在组件js中

// pages/component/test.js
Component({
  /**   
  * 组件的属性列表   
  */
 properties: {    
 	myValue: String  
 	},
  /**  
   * 组件的初始数据  
   */ 
  data: {
  	},
  /**   
  * 组件的方法列表   
  */  
  methods: {
  	}
  })

二. 数据绑定传值

只需要改变设置属性的方式即可

<!--index.wxml-->
<custom-component my-value={{helloValue}} />

三. 双向数据绑定

这个方法数据改变的话，也会改变组件中属性的值

<!--index.wxml-->
<custom-component model:my-value={{helloValue}} />