组件v-model

BJYXSZD-91852024-01-13 11:23

以下是一个简单的示例，展示了如何使用组件和v-model来实现数据的双向绑定：

复制代码

<template>
  <div>
    <custom-input v-model="message"></custom-input>
    <p>输入的内容为: {{ message }}</p>
  </div>
</template>

<script>
  import CustomInput from './CustomInput.vue';
  
  export default {
    components: {
      CustomInput
    },
    data() {
      return {
        message: ''
      }
    }
  }
</script>

// CustomInput.vue

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

<script>
  export default {
    props: ['value']
  }
</script>

在上面的示例中，父组件使用了一个自定义的<custom-input>组件，并使用v-model指令将message数据双向绑定到该组件。

自定义组件中，我们通过接收一个value属性来接收父组件传递的数据，并在输入框中使用该属性。当输入框的值发生变化时，我们通过$emit方法触发了一个名为input的事件，并传递了输入框的新值。父组件监听了该事件，并更新了message数据，从而实现了数据的双向绑定。

最终，我们在父组件中显示了message数据的值，可以看到当输入框的值发生变化时，该值也会相应地更新。