vue3 emit 中updata原理
时间: 2023-07-03 17:06:12 浏览: 181
在Vue 3中,父组件通过v-bind绑定子组件的属性或通过v-model双向绑定子组件的属性时,会自动生成一个名为`update:${属性名}`的自定义事件。子组件可以通过`$emit`方法触发这个事件,从而通知父组件更新绑定的属性。
举个例子,在父组件中绑定一个子组件的`value`属性:
```html
<template>
<child-component v-bind:value="parentValue" />
</template>
```
在子组件中,我们可以通过`$emit`方法触发`update:value`事件:
```js
// 子组件
methods: {
updateParentValue(newValue) {
this.$emit('update:value', newValue)
}
}
```
当子组件的`value`属性发生变化时,就可以调用`updateParentValue`方法触发`update:value`事件,从而通知父组件更新绑定的`parentValue`属性。
父组件可以在模板中使用`v-on`监听`update:${属性名}`事件,并在事件处理函数中更新对应的属性值:
```html
<template>
<child-component v-bind:value="parentValue" v-on:update:value="parentValue = $event" />
</template>
```
当子组件触发`update:value`事件时,父组件的事件处理函数会被调用,将新的属性值赋值给`parentValue`。这样,父组件的`parentValue`属性就会与子组件的`value`属性保持同步。
阅读全文