当前位置： 技术文章>> Vue.js 中的 v-model 在自定义组件中如何工作？

文章标题：Vue.js 中的 v-model 在自定义组件中如何工作？
  • 文章分类: 后端
  • 3923 阅读
文章标签: vue vue基础

在 Vue.js 中，v-model 是一种语法糖，用于在表单输入和应用状态之间创建双向数据绑定。然而，当在自定义组件中使用 v-model 时，其工作方式会有所不同，因为 Vue 需要一种方式来知道组件内部哪个 prop 和哪个事件应该被用来更新父组件的状态。

基本用法

在自定义组件中，v-model 默认会利用名为 value 的 prop 和名为 input 的事件。这意味着当 v-model 被绑定到自定义组件时，它会自动将 value 属性传递给组件的 value prop，并监听 input 事件来更新绑定的数据。

组件定义

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

<script>
export default {
  props: ['value'],
  // 其他选项...
}
</script>

使用组件

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

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

export default {
  components: {
    MyCustomInput
  },
  data() {
    return {
      myData: ''
    }
  }
}
</script>

自定义 v-model

虽然 Vue 使用 value 和 input 作为 v-model 的默认 prop 和事件，但你可以通过修改组件的 model 选项来自定义这些名称。

组件定义（自定义 model）

<template>
  <div>
    <input
      :checked="checked"
      @change="$emit('update:checked', $event.target.checked)"
      type="checkbox"
    >
  </div>
</template>

<script>
export default {
  model: {
    prop: 'checked',
    event: 'update:checked'
  },
  props: ['checked'],
  // 其他选项...
}
</script>

使用组件（自定义 model）

<template>
  <div>
    <my-custom-checkbox v-model="isChecked"></my-custom-checkbox>
  </div>
</template>

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

export default {
  components: {
    MyCustomCheckbox
  },
  data() {
    return {
      isChecked: false
    }
  }
}
</script>

通过修改 model 选项，你可以为 v-model 在自定义组件中的使用提供更大的灵活性，使其能够更自然地适应各种组件类型和数据交互模式。

推荐文章