vue自定义组件双向绑定

在中，自定义组件的双向绑定没有直接一步到位的方式，需要通过属性传值和事件传值来实现。在使用自定义组件时，可以通过向组件传递属性来实现父组件向子组件的数据传递，然后在子组件内部使用这些属性进行相应的操作。同时，子组件也可以通过触发事件来向父组件传递数据。这样就实现了双向绑定的效果。但需要注意的是，在Vue中，v-model指令不能直接支持组件的双向绑定，需要通过属性和事件的方式来实现。<span class="em">1</span><span class="em">2</span><span class="em">3</span>
#### 引用[.reference_title]
- *1* *2* *3* [vue 自定义组件双向数据绑定](https://blog.csdn.net/qq_42881675/article/details/93618159)[target="_blank" data-report-click={"spm":"1018.2226.3001.9630","extra":{"utm_source":"vip_chatgpt_common_search_pc_result","utm_medium":"distribute.pc_search_result.none-task-cask-2~all~insert_cask~default-1-null.142^v93^chatsearchT3_2"}}] [.reference_item style="max-width: 100%"]
[ .reference_list ]

相关问题

vue3自定义组件双向数据绑定

### Vue3 中自定义组件实现双向数据绑定

#### 使用 `v-model` 指令（推荐方式）

在 Vue3 中，通过 `v-model` 实现自定义组件的双向数据绑定是最简洁的方式。当使用 `v-model` 绑定到一个子组件上时，默认情况下会监听名为 `update:modelValue` 的事件并将其值作为新的输入传递给父级。

<!-- 子组件 MyInput.vue -->
<template>
  <input :value="modelValue" @input="$emit('update:modelValue', $event.target.value)" />
</template>

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

<!-- 父组件 ParentComponent.vue -->
<template>
  <my-input v-model="parentData"></my-input>
</template>

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

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

[^1]

#### 手动实现双向绑定（不使用 `v-model` 语法糖）

如果不采用 `v-model` 这样的语法糖，则需要显式地处理 prop 和 event 来完成同样的功能：

<!-- 子组件 CustomCheckbox.vue -->
<template>
  <label>
    <input type="checkbox"
           :checked="isChecked"
           @change="$emit('change', !isChecked)">
    {{ label }}
  </label>
</template>

<script>
export default {
  props: {
    checked: Boolean,
    label: String
  },
  computed: {
    isChecked() {
      return this.checked;
    }
  }
}
</script>

<!-- 父组件 App.vue -->
<template>
  <custom-checkbox :checked="isAgreed" @change="toggleAgreement">同意条款</custom-checkbox>
</template>

<script>
import CustomCheckbox from './CustomCheckbox.vue'

export default {
  name: 'App',
  components: { CustomCheckbox },
  data () {
    return {
      isAgreed: false
    }
  },
  methods: {
    toggleAgreement (newValue) {
      this.isAgreed = newValue
    }
  }
}
</script>

[^2]

#### `.sync` 修饰符

`.sync` 是一种简化写法用于同步父子组件之间的状态更新。它允许我们更方便地将多个属性与相应的事件关联起来。不过需要注意的是，在现代 Vue 应用中通常建议优先考虑 `v-model` 或者直接使用事件来代替 `.sync`。

<!-- 子组件 ChildWithSyncModifier.vue -->
<template>
  <div>
    <button @click="$emit('update:message', message + '!')">增加感叹号</button>
  </div>
</template>

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

<!-- 父组件 UsingSyncModifier.vue -->
<template>
  <child-with-sync-modifier :message.sync="greetingMessage"></child-with-sync-modifier>
</template>

<script>
import ChildWithSyncModifier from './ChildWithSyncModifier.vue'

export default {
  components: { ChildWithSyncModifier },
  data () {
    return {
      greetingMessage: '你好'
    }
  }
}
</script>

#### `.sync` 与 `v-model` 的比较

两者都可以用来创建双向的数据流，但是它们之间存在一些差异:

- **适用范围**: `v-model` 主要针对表单控件类元素；而 `.sync` 则适用于任何类型的 prop。
- **默认行为**: 对于 `v-model`, 默认事件名称为 `input`; 而对于 `.sync`, 需要在 emit 时指定完整的路径如 `update:propName`.
- **灵活性**: 如果只需要简单的布尔值或其他单一类型的状态共享, `.sync` 更加直观; 若涉及到复杂对象或数组的操作则可能更适合使用 `v-model`.

vue 自定义组件 v-model双向绑定

Vue.js 中的 `v-model` 是单向数据流（Single-Way Data Binding）的核心特性之一，但在处理自定义组件时，我们可以利用它实现组件间的双向数据绑定。当在自定义组件上使用 `v-model`，实际上是在组件的模板上创建了一个响应式的绑定点，该绑定点会连接到组件实例的属性。

例如，在一个简单的自定义组件 `CustomInput.vue`：

<template>
  <input type="text" v-model="value">
</template>

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

当你在父组件中这样使用这个自定义组件：

<custom-input v-model="parentValue"></custom-input>

此时，`parentValue` 的值会被自动同步到 `custom-input` 组件的输入框中，并随其改变而更新。同样，当你在输入框内输入内容，`parentValue` 也会相应地接收到新的值。这就是 Vue 中通过 `v-model` 实现自定义组件之间双向数据绑定的方式。