vue组件中父子传值双向绑定

效果图

 

 

父组件页面

父组件页面引用子组件

父组件用 :parentmessage.sync="hphm"  传递 hphm 给子组件并接收子组件更新过的 hphm

<its-hphmInput class="filter-input" glbm="京" size="small" @onChange="hphmToUpperCase($event)" :parentmessage.sync="hphm"></its-hphmInput>

PS：因为sync其实是一个语法糖,这段代码会被扩展为

<its-hphmInput class="filter-input" glbm="京" size="small" @onChange="hphmToUpperCase($event)" :parentmessage="hphm"
  @update:parentmessage="val => parentmessage=val"></its-hphmInput>

 

 

子组件页面

props接收

    props: {
      parentmessage: {
        type: String,
        default: '',
      }
    },

监听parentmessage，监听到改变后赋值给子组件的 hphm （子组件的input v-model.tirm="hphm" 是双向绑定）

    watch: {
      parentmessage: {
        handler(val, oldVal) {
          this.hphm = val;
        },
        // deep属性对对象进行深度监听
        deep: true,
        // 这样使用watch时有一个特点，就是当值第一次绑定的时候，不会执行监听函数，只有值        发生改变才会执行。
        // 如果我们需要在最初绑定值的时候也执行函数，则就需要用到immediate属性。比如当父组件向子组件动态传值时，子组件props首次获取到父组件传来的默认值时，也需要执行函数，此时就需要将immediate设为true。
        immediate: true

      },
    },