VUE2.0 自定义组件 v-model双向绑定示例

在 Vue.js 2.0 中，`v-model` 是一个非常强大的指令，用于实现数据绑定和表单输入的双向数据同步。自定义组件中使用 `v-model` 可以让你的用户输入自动更新组件的内部状态，并反之亦然。

以下是一个简单的自定义组件（例如一个名为 `CustomInput` 的输入框组件）的 `v-model` 示例：

<template>
  <div>
    <input type="text" v-model="inputValue">
    <p>你输入的是: {{ inputValue }}</p>
  </div>
</template>

<script>
export default {
  data() {
    return {
      inputValue: '',
    };
  },
};
</script>

在这个例子中：
- `<input type="text" v-model="inputValue">`：将输入框的值绑定到 `inputValue` 数据属性上，用户在输入框中修改的任何内容都会实时更新 `inputValue`。
- `<p>你输入的是: {{ inputValue }}</p>`：当 `inputValue` 发生变化时，对应的文本也会根据新的值显示。

如果你在父组件中使用这个自定义组件：

<template>
  <div>
    <custom-input></custom-input>
  </div>
</template>

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

export default {
  components: {
    CustomInput,
  },
};
</script>

并且希望父组件的数据影响子组件，你可以在父组件的数据中设置默认值并传递给子组件：

<template>
  <div>
    <custom-input :value="parentValue"></custom-input>
  </div>
</template>

<script>
export default {
  data() {
    return {
      parentValue: '初始值',
    };
  },
  components: {
    CustomInput: {
      props: ['value'], // 定义接收父组件传入的值
      data() {
        return {
          inputValue: this.value, // 在子组件中设置默认值
        };
      },
    },
  },
};
</script>