vue中各个组件的传值问题

一、父组件向子组件的传值
应用产场景
在下面的页面中可以看到三个按钮，点击三个按钮需要动态改变子组件的值，但是在使用props的过程中发现子主键的数据并没有实时改变，只是在页面刷新第一次触发的时候才会发生改变，其原因是没有添加监听watch

image.png

父组件使用子组件

      <message-template :select-only-one-value="selectOnlyOne" :notice-type-value="noticeType" :send-message-show-value="sendMessageShow" :makesure-button-is-show-value="makesureButtonIsShow" :operate-is-show-value="operateIsShow" :add-button-is-show-value="addButtonIsShow" @changeMessageTemplateVisible="templateVisible" />
以操作:notice-type-value="noticeType" 为例

第一步:在父组件中定义数据，并且编写改变数据的方法，

定义数据
data(){
return {
noticeType: 0
}

定义方法,三个按钮监听方法中的一个
methods:{
 sendMessageByBroadcast() {
      this.noticeType = 2
    },
}

第二步：子组件中定义接受值，并且启用监听（watch）
如果不启用监听，将会出现数据只是在第一次触发的时候发生改变，即子组件中的数据没法跟随父组件的数据改变而改变

定义props
props:{
noticeTypeValue: {
      type: Number,
      default: 0
    }
}

在data中定义对应的接收参数
data(){
return {
 noticeType: this.noticeTypeValue
}
}

使用watch
  watch: {
    noticeTypeValue: {
      handler(curVal, oldVal) {
        this.noticeType = curVal
        console.log('子组件--------：' + this.noticeType)
      }
    }
  }
注意:监听的是父组件传过来的值，改变的是data中定义的接收值

二、子组件向父组件之间传值
三、兄弟组件之间的传值