组件传值: 父传子, 子传父, 兄弟组件传值

一. 父组件给子组件传值

父组件： 通过 v-bind 绑定向子组件传递值

<test :text="text"></test>

子组件： 通过 prop 接收父组件传递过来的值

props:['text'],

注意: props 接收数据有两种方式:

• 用数组接受: props: [‘text’]

• 设置带有默认值的props

props: {
   text: {
       type: String,      //  指定类型 
       default(){
          return '默认值'    // 给定默认值
            }
        }
     }
}

注意: <test :text="'放鹏飞'"></test> 中, 后面的绑定值必须是一个表达式,不能直接是字符串. 否则props 会接收不到的.
需要换个写法<test :text="'放鹏飞'"></test> ,可以接受到.
注意: 表达式中单引号的使用

二. 子组件给父组件传值

子组件： 通过 $emit 自定义事件向父组件传递参数

this.$emit("event",this.text)

父组件： 定义自定义事件并接收参数

<test @event="getData"></test>

methods:{
    getData(v){
        //接收子组件传递回来的值
        console.log(v)
        this.text=v
    }
}

三. 兄弟组件通讯

发送组件: 通过 uni.$emit(eventName,OBJECT) 触发全局的自定事件。附加参数都会传给监听器回调

 // -- 触发监听
 //通过 `uni.$emit(eventName,OBJECT)` 触发全局的自定事件
 // uni.$emit(uni.$on的事件名,触发事件携带的附加参数)
 uni.$emit('updateData',"更新的数据")

监听组件： 通过 uni.$on(eventName,callback) 监听全局的自定义事件，事件可以由 uni.$emit 触发，回调函数会接收所有传入事件触发函数的额外参数。

  // -- 添加 监听
  created() {
      //uni.$on(事件名，事件的回调函数)
      uni.$on('updateData', (v) => {
        this.text = v
       })
  },

// -- 移除监听
beforeDestroy() {
    uni.$off('data-for-b', this.receiveData);
  }