vue 自定义组件 v-model双向绑定、 父子组件同步通信的多种写法

Vue是一款流行的前端框架，它支持自定义组件，并提供了v-model指令来实现双向数据绑定。同时，Vue也提供了多种方式来实现父子组件之间的同步通信。

对于自定义组件的v-model双向绑定来说，最简单的方法就是在子组件的props中定义一个value属性，并将其绑定到父组件中的data中的属性。然后，子组件中通过$emit('input', value)触发一个input事件来改变父组件的数据。例如：

父组件：

<template>
  <div>
    <custom-input v-model="message"></custom-input>
  </div>
</template>

<script>
import CustomInput from './CustomInput.vue';

export default {
  components: {
    CustomInput
  },
  data() {
    return {
      message: 'Hello world!'
    };
  }
};
</script>

子组件：

<template>
  <div>
    <input :value="value" @input="$emit('input', $event.target.value)">
  </div>
</template>

<script>
export default {
  props: {
    value: {
      type: String,
      required: true
    }
  }
};
</script>

除了上述方式外，还可以通过自定义指令、混入等方式来实现自定义组件的v-model双向绑定。

对于父子组件之间的同步通信，Vue提供了多种方式来实现，例如：

1. props和$emit

在父组件中通过props将数据传递给子组件，在子组件中通过$emit触发一个事件并将数据传递回父组件。例如：

父组件：

<template>
  <div>
    <child-component :message="message" @update-message="updateMessage"></child-component>
  </div>
</template>

<script>
import ChildComponent from './ChildComponent.vue';

export default {
  components: {
    ChildComponent
  },
  data() {
    return {
      message: 'Hello world!'
    };
  },
  methods: {
    updateMessage(value) {
      this.message = value;
    }
  }
};
</script>

子组件：

<template>
  <div>
    <input :value="message" @input="updateMessage($event.target.value)">
  </div>
</template>

<script>
export default {
  props: {
    message: {
      type: String,
      required: true
    }
  },
  methods: {
    updateMessage(value) {
      this.$emit('update-message', value);
    }
  }
};
</script>

2. $parent和$children

在父组件中通过$children获取所有子组件，然后通过$parent获取父组件，从而实现父子组件之间的通信。例如：

父组件：

<template>
  <div>
    <child-component></child-component>
    <button @click="sendMessage">Send message to child</button>
  </div>
</template>

<script>
import ChildComponent from './ChildComponent.vue';

export default {
  components: {
    ChildComponent
  },
  methods: {
    sendMessage() {
      this.$children[0].sendMessage('Hello child');
    }
  }
};
</script>

子组件：

<template>
  <div>
    <p>{{ message }}</p>
  </div>
</template>

<script>
export default {
  data() {
    return {
      message: ''
    };
  },
  methods: {
    sendMessage(value) {
      this.message = value;
    }
  }
};
</script>

除了上述方式外，还可以通过$refs、事件总线、Vuex等方式来实现父子组件之间的同步通信。需要根据具体的场景来选择合适的方式。