vue父子组件“双向绑定”

1.需求

vue的prop可以从父组件传递一个值到子组件，当子组件对传过来的值进行改变，父组件的值并不会改变，这显然不符合我的需求。我的需求是：当父组件的值改变，那么子组件的值也跟着改变；反过来，子组件改变值，父组件的值也跟着改变；可以理解为类似“双向绑定”

2.首先，定义一个子组件

<template>
  <div>
    <input type="text" v-model="label" />
  </div>
</template>

<script>
export default {
          
   
  name: MyInput,
  props: {
          
   
  	  //name为父组件传入的值，默认为空
      name: {
          
   
      type: String,
      default: 
    }
  },
  data () {
          
   
    return {
          
   
      //子组件一般不要直接改变父组件传入的值，定义label,并把父组件传入的值（name）赋值给label
      label: this.name
    }
  },
  watch: {
          
   
  	//1.需求：子组件改变值，父组件的值也跟着改变
  	//监听label，当label改变，调用this.$emit
    label (val) {
          
   
      //告诉父组件name要更新，更新的值为val，也是label改变后的值
      this.$emit(update:name, val)
    },
    //2.需求：当父组件的值改变，那么子组件的值也跟着改变
    //监听name，当父组件要改变name值
    name (val) {
          
   
      //把name改变的值赋值给label 
      this.label = val
    }
  } 
}
</script>

<style scoped>

</style>

3.父组件

<template>
  <div>
  	<!--在父组件使用,接收子组件改变后的值-->
    <my-input :name.sync="str"></my-input>
    <!--另一种写法-->
    <my-input :name="str" v-on:update:name="str = $event"></my-input>
  </div>
</template>

<script>
import MyInput from ../../components/base/MyInput
export default {
          
   
  components: {
          
   
    MyInput 
  },
  data () {
          
   
    return {
          
   
     str: 
    }
  }
}
</script>

<style scoped>

</style>