vue父子组件数据的双向绑定

父组件

<template>
  <div>
    父组件 {{list}}
    <child v-model="list" v-model:other="other"></child>
  </div>
</template>

<script>
import child from './About.vue'
export default {
  data() {
    return {
      list: {},
      other: {}
    }
  },
  components: {
    child
  },
}
</script>

<style>

</style>

子组件

<template>
    <div>
      子组件
      {{modelValue}}
      <button @click="update({a:1})">双向数据</button>
    </div>
</template>

<script>
export default {
  props: {
    modelValue:Object
  },
  mounted() {
    console.log(this.modelValue);
  },
  methods: {
    update(a) {
      this.$emit("update:modelValue", a)
      this.$emit("update:other", a)
    }
  },
}
</script>

<style>

</style>

据说也父子组件双向绑定也可以通过.sync来实现，不过这种方法也可以实现