vue - 父子组件(.sync v-model )同步通信、双向绑定

绝地灬酷狼 2021-09-18 11:54 384阅读 0赞

### 前言 ###

父子组件通信，都是单项的，很多时候需要双向通信。方法如下：

1.  通过.sync修饰符
2.  通过v-model指令

### 1、.sync修饰符 ###

实例：  
        父组件  
        `:msg.sync="fatherValue"`

<template lang="pug">
      .wrap
        h2 fatherValue:
        h3(v-text="fatherValue")
        Button(type="primary" @click="fatherValueChange") 点击父组件值改变
        hr
        HelloWorld(:msg.sync="fatherValue")
    </template>
    <script>
    // @ is an alias to /src
    import HelloWorld from '@/components/HelloWorld.vue'
    export default {
      name: 'home',
      data () {
        return {
          fatherValue: 100
        }
      },
      methods: {
        fatherValueChange () {
          this.fatherValue++
        }
      },
      components: {
        HelloWorld
      }
    }
    </script>

子组件  
        `this.$emit('update:msg', this.childValueChange())`

<template lang="pug">
      #div
        h2 childValue
        h3(v-text="msg")
        Button(type="primary" @click="childValueChangeEmit") 点击子组件值改变
    </template>
    <script>
    export default {
      name: 'HelloWorld',
      props: {
        msg: Number
      },
      methods: {
        childValueChange () {
          return this.msg + 1
        },
        childValueChangeEmit () {
          this.$emit('update:msg', this.childValueChange())
        }
      }
    }
    </script>
    
    <style scoped lang="stylus">
    </style>

### 2、v-model指令 ###

父组件  
        `v-model="fatherValue"`

<template lang="pug">
      .wrap
        h2 fatherValue:
        h3(v-text="fatherValue")
        Button(type="primary" @click="fatherValueChange") 点击父组件值改变
        hr
        HelloWorld(v-model="fatherValue")
    </template>
    <script>
    // @ is an alias to /src
    import HelloWorld from '@/components/HelloWorld.vue'
    export default {
      name: 'home',
      data () {
        return {
          fatherValue: 100
        }
      },
      methods: {
        fatherValueChange () {
          this.fatherValue++
        }
      },
      components: {
        HelloWorld
      }
    }
    </script>

子组件方式一：默认input事件类型

<template lang="pug">
      #div
        h2 childValue
        h3(v-text="value")
        Button(type="primary" @click="childValueChangeEmit") 点击子组件值改变
    </template>
    <script>
    export default {
      name: 'HelloWorld',
      props: {
        value: Number
      },
      methods: {
        childValueChange () {
          return this.value + 1
        },
        childValueChangeEmit () {
          this.$emit('input', this.childValueChange())
        }
      }
    }
    </script>
    
    <style scoped lang="stylus">
    </style>

子组件方式二：自定义事件类型

<template lang="pug">
      #div
        h2 childValue
        h3(v-text="msg")
        Button(type="primary" @click="childValueChangeEmit") 点击子组件值改变
    </template>
    <script>
    export default {
      name: 'HelloWorld',
      /*
    	允许一个自定义组件在使用 v-model 时定制 prop 和 event 。
    	默认情况下，一个组件上的 v-model 会把 value 用作 prop 且把 input 用作 event，
    	但是一些输入类型比如单选框和复选框按钮可能想使用 value prop 来达到不同的目的。
    	使用 model 选项可以回避这些情况产生的冲突。	
    	详见：https://cn.vuejs.org/v2/api/#model
    	*/
      model: { 
        prop: 'msg',
        event: 'click'
      },
      props: {
        msg: Number
      },
      methods: {
        childValueChange () {
          return this.msg + 1
        },
        childValueChangeEmit () {
          this.$emit('click', this.childValueChange())
        }
      }
    }
    </script>
    
    <style scoped lang="stylus">
    </style>

子组件方式三：子组件自定义data值

<template lang="pug">
      #div
        h2 childValue
        h3(v-text="value")
        Button(type="primary" @click="childValueChange") 点击子组件值改变
    </template>
    <script>
    export default {
      name: 'HelloWorld',
      props: {
        value: Number
      },
      data () {
        return {
          childDataValue: this.value
        }
      },
      watch: {
        value (val) {
          this.childDataValue = val
        },
        childDataValue (val) {
          this.$emit('input', val)
        }
      },
      methods: {
        childValueChange () {
          return this.childDataValue++
        }
      }
    }
    </script>
    
    <style scoped lang="stylus">
    </style>