组件传值

父组件向子组件传值

1>需要将对应的值写在对应的标签上，充当标签属性

<!--pages/page1/page1.wxml-->
<!-- 调用组件的父容器 -->
<nav hello="world">
</nav>

2>将属性注册在properties 属性中

// pages/components/nav/nav.js
Component({
  /*** 组件的属性列表*/
  properties: {
    hello:{
      type:'string',  //属性的类型
      value:""   //空字符串，默认初始值
    }
  },
})

properties 定义

定义段	类型	是否必填	描述	最低版本
type		是	属性的类型
optionalTypes	Array	否	属性的类型（可以指定多个）	2.6.5
value		否	属性的初始值
observer	Function	否	属性值变化时的回调函数

3>在组件模板中，可以直接渲染数据

<!--pages/components/nav/nav.wxml-->
<view>{{hello}}</view>

 

 子组件向父组件传值

 1>在自定义组件中以事件的形式传递

<!--pages/components/mybutton/mybutton.wxml-->
<!--自定义组件中的模板文件-->
<button type="primary" bindtap="click">子组件传值父组件</button>

在子组件的.js文件中，写入对应的方法

// pages/components/mybutton/mybutton.js
//自定义组件中的js文件

Component({
  methods: {
    click:function(){  //事件函数
      //第一个参数是事件名，第二个参数为传递的数据
      this.triggerEvent('myevent',{"name":"hello"})   //triggerEvent自定义事件

//console.log(0)  } } })

2>在父组件中以组件标签的形式调用组件，将自定义事件绑定在这个组件标签上

<!--pages/page1/page1.wxml-->
<!-- 调用组件的父容器 -->
<!-- bind绑定事件的方式，myevent事件名 -->
<!--父组件模板中bind绑定事件的关键字，meEvent是事件名，eventclick是事件函数-->
<mybutton bindmyevent="eventclick">
</mybutton>
<view>{{name}}</view>

父组件的js文件拿到数据并渲染

// pages/page1/page1.js
Page({
  data:{
    name:"",
  },
    eventclick:function(e){
       var data=e.detail;    //获取子组件中的数据
       console.log(data)
       this.setData({   //修改data中的数据
          name:data.name
       })
    },
  })

　　

获取子组件的值，并渲染到界面中