每天学习一点vue知识

在Vue中，可以使用v-model来创建双向绑定，这样子组件中的数据变化会立即反映到父组件中，同时父组件的数据更新也会传递到子组件。

以下是一个简单的示例，展示了如何在Vue中使用v-model来实现双向绑定：

<template>
  <div>
    <input v-model="parentMessage" placeholder="edit me">
    <p>Message from parent: {{ parentMessage }}</p>
    <ChildComponent v-model="parentMessage" />
  </div>
</template>
 
<script>
import ChildComponent from './ChildComponent.vue';
 
export default {
  components: {
    ChildComponent
  },
  data() {
    return {
      parentMessage: ''
    };
  }
};
</script>

在这个例子中，ChildComponent是一个子组件，它接收一个名为value的prop，并发出一个名为input的事件：

<!-- ChildComponent.vue -->
<template>
  <div>
    <input :value="value" @input="$emit('input', $event.target.value)">
  </div>
</template>
 
<script>
export default {
  props: ['value'],
  // ...
};
</script>

当父组件的parentMessage变化时，子组件中的输入框会显示更新后的值。同时，当在子组件的输入框中输入文本时，parentMessage也会被更新，反映了双向绑定的效果。