vue使用v-model进行跨组件绑定的基本实现方法

<template>
  <div>
  // 3：使用子组件，并使用v-model绑定
    <About v-model="father"/>
  </div>
</template>

<script>
// 1：引入子组件
import About from "./About";
export default {
// 2：注册子组件
  components: {
    About,
  },
  data() {
      return {
      // 值给空
          father:''
      }
  },
  // 监听组件数据的变化
  watch:{
      father(val){
          console.log(val);
      }
  }
};
</script>

<template>
  <div>
  // 2：使用v-model绑定
      <input type="text" v-model="son">
  </div>
</template>

<script>
export default {
    // 1：接收父组件的信息
    props: {
        value:{
            type:String,
            default:''
        }
    },
    data() {
        return {
        // 3：赋空值
            son:''
        }
    },
    // 4：监听 如果改变
    watch:{
        // 把value赋值给son   
        value(){
        // 这里的this.value是props里的value
            this.son = this.value
        },
        // 把son传递给父组件
        son(){
            this.$emit('input',this.son)
        }
    }
}
</script>

value() {
      this.SonStaffPhoto = this.value
      console.log(this.SonStaffPhoto)
    }

SonStaffPhoto() {
      this.$emit('input', this.SonStaffPhoto)
    },