1. props
父组件使用 props 传递数据给子组件:
<!-- parent.vue -->
<child :msg="message"></child>
<!-- child.vue -->
<p>{{ msg }}</p>// parent.vue
data() {
return {
message: 'Hello!'
}
}子组件使用 props 接收:
// child.vue
props: ['msg']2. emit 自定义事件
子组件触发事件,父组件监听该事件并更新数据:
<!-- parent.vue -->
<child @update="updateMessage"></child>
<!-- child.vue -->
<button @click="emitUpdate">Update</button>
<p>{{ msg }}</p> // parent.vue
methods: {
updateMessage(newMsg) {
this.message = newMsg
}
}// child.vue
methods: {
emitUpdate() {
this.$emit('update', 'Updated message!')
}
}3. refs
通过 ref 给子组件绑定引用,然后通过该引用直接更新子组件的数据或调用子组件的方法:
<!-- parent.vue -->
<child ref="child"></child>
<button @click="updateChildMessage">Update Child Message</button>// parent.vue
methods: {
updateChildMessage() {
this.$refs.child.msg = 'New message'
}
}在 child 组件中:
export default {
data() {
return {
msg: 'Initial message'
}
}
}4. provide / inject
父组件提供数据,子组件注入并使用:
// parent.vue
provide: {
name: 'Parent'
}子组件:
// child.vue
inject: ['name']
console.log(name) // Prints "Parent"最后总结一下：Vue 3 中组件传值主要的方式有:
1. props - 父传子
2. emit - 子传父
3. refs - 父访问子
4. provide/inject - 祖先传后代文章来源：https://www.toymoban.com/news/detail-726978.html
这些方式可以组合使用,实现非常灵活的组件通信。文章来源地址https://www.toymoban.com/news/detail-726978.html
到了这里，关于vue3中的组件传值的方式的文章就介绍完了。如果您还想了解更多内容，请在右上角搜索TOY模板网以前的文章或继续浏览下面的相关文章，希望大家以后多多支持TOY模板网！
