vue修饰符.sync

father.vue

<template>
  <div class="father">
    {{father}}
    <child :child.sync="father"></child>
  </div>
</template>

<script>
import child from './child.vue'
export default {
  name: 'father',
  data(){
    return{

    father:'father'
    }
  },
  props: {
  },
  watch: {
    father(newValue,oldValue) {
      console.log("我变了");
    }
  },
  computed: {
    mother: function() {//注意不能用箭头函数
      return this.father + " is my husband";
    }
  },
  components:{
    child
  }
}
</script>

child.vue

<template>
  <div class="child">
    {{child}}
    <button @click="pass">传新值给爸爸和自己</button>
  </div>
</template>

<script>
export default {
  name: "child",
  data() {
    return {
    };
  },
  props: ["child"],
  methods: {
    pass() {
      this.$emit('update:child', 'malinshu')
    }
  }
};
</script>

效果

点击按钮前

点击后

这样父子组件的数据就同步了，child改变的时候，father组件的father变量也跟着变