[vue] vue父子组件双向绑定的方法有哪些？ #347

haizhilin2013 · 2019-06-20T20:47:33Z

[vue] vue父子组件双向绑定的方法有哪些？

zyronon · 2019-07-07T10:34:49Z

自己封装v-model

xunbie · 2019-07-19T06:05:41Z

1.利用对象的引用关系来实现
2.父子组件之间的数据传递
3.使用.sync修饰符

Cai-zhiji · 2023-07-07T09:14:09Z

使用v-model指令： v-model是Vue提供的语法糖，用于在组件之间实现双向绑定。在子组件中，可以通过props接收父组件传递的值，并使用$emit方法触发自定义事件将更新后的值传递回父组件。

<!-- 父组件 -->
<template>
  <div>
    <ChildComponent v-model="dataValue" />
  </div>
</template>

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

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

在父组件中，可以使用v-model来绑定子组件的值，实现双向绑定。

使用.sync修饰符： .sync修饰符是Vue提供的另一种简化父子组件双向绑定的方式。它通过自动生成一个名为update:xxx的属性和触发事件来实现双向绑定。

<!-- 父组件 -->
<template>
  <div>
    <ChildComponent :value.sync="dataValue" />
  </div>
</template>

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

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

在父组件中，使用:value.sync将子组件的值绑定到父组件的属性上，并在子组件中使用$emit('update:value', newValue)来触发更新。

使用自定义事件：可以在父组件中使用自定义事件来接收子组件的更新，并通过事件参数获取子组件的新值。

<!-- 父组件 -->
<template>
  <div>
    <ChildComponent @updateValue="dataValue = $event" :value="dataValue" />
  </div>
</template>

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

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

在子组件中，通过$emit('updateValue', newValue)触发自定义事件，并在父组件中通过@updateValue="dataValue = $event"来接收子组件的更新。

以上是几种常见的父子组件双向绑定的方法。根据具体的项目需求和开发场景，可以选择合适的方式来实现双向绑定。

haizhilin2013 added the vue label Jun 20, 2019

Provide feedback

Saved searches

Use saved searches to filter your results more quickly

[vue] vue父子组件双向绑定的方法有哪些？ #347

[vue] vue父子组件双向绑定的方法有哪些？ #347

haizhilin2013 commented Jun 20, 2019

zyronon commented Jul 7, 2019

xunbie commented Jul 19, 2019

Cai-zhiji commented Jul 7, 2023

[vue] vue父子组件双向绑定的方法有哪些？ #347

[vue] vue父子组件双向绑定的方法有哪些？ #347

Comments

haizhilin2013 commented Jun 20, 2019

zyronon commented Jul 7, 2019

xunbie commented Jul 19, 2019

Cai-zhiji commented Jul 7, 2023