vue3语法 父子传值
时间: 2023-09-15 21:17:56 浏览: 42
在Vue3中,可以使用props和emit来实现父子组件之间的数据传递。
首先,在父组件中使用v-bind指令将需要传递给子组件的数据绑定到子组件的props属性上。例如:
```html
<template>
<div>
<child-component :prop-name="parentData"></child-component>
</div>
</template>
```
其中,parentData是父组件中的数据,prop-name是子组件中props中的属性名。
然后,在子组件中,声明props接收父组件传递过来的数据。例如:
```html
<template>
<div>
<p>{{ propName }}</p>
</div>
</template>
<script>
export default {
props: {
propName: {
type: String,
required: true
}
}
}
</script>
```
在子组件中,使用propName来访问从父组件传递过来的数据。
如果想要在子组件中修改父组件中的数据,可以使用emit方法来触发父组件中的事件。例如:
```html
<template>
<div>
<button @click="updateParentData">Update Parent Data</button>
</div>
</template>
<script>
export default {
methods: {
updateParentData() {
this.$emit('update', 'new data')
}
}
}
</script>
```
在子组件中,使用$emit方法触发名为update的事件,并传递一个新的数据new data给父组件。
最后,在父组件中,监听子组件触发的事件,并更新父组件中的数据。例如:
```html
<template>
<div>
<child-component :prop-name="parentData" @update="parentData = $event"></child-component>
</div>
</template>
```
在父组件中,使用@update来监听子组件触发的update事件,并将$event中的数据更新到parentData中。