Vue父子组件通讯方式及实现方法
作者：前端每日三省
这篇文章主要介绍了Vue父子组件通讯方式及实现方法，文中通过代码示例介绍的非常详细，对我们的学习或工作有一定的帮助，感兴趣的同学可以参考阅读下
Vue父子组件通讯方式及实现
1. props和$emit
父组件通过props向子组件传递数据，子组件通过$emit触发父组件定义的事件来传递数据。
父组件：
<template>
<div>
<child-component :message="message" @update-message="updateMessage"></child-component>
</div>
</template>
<script>
import ChildComponent from './ChildComponent.vue';
export default {
name: 'ParentComponent',
components: {
ChildComponent
},
data() {
return {
message: 'Hello World!'
}
},
methods: {
updateMessage(newMessage) {
this.message = newMessage;
}
}
}
</script>子组件：
<template>
<div>
<p>{{ message }}</p>
<button @click="updateMessage">Update Message</button>
</div>
</template>
<script>
export default {
name: 'ChildComponent',
props: ['message'],
methods: {
updateMessage() {
this.$emit('update-message', 'New Message');
}
}
}
</script>2. $parent和$children
父组件可以通过$children属性获取到所有子组件的实例，并通过$parent属性获取到自己的父组件实例。
父组件：
<template>
<div>
<child-component></child-component>
</div>
</template>
<script>
import ChildComponent from './ChildComponent.vue';
export default {
name: 'ParentComponent',
components: {
ChildComponent
},
methods: {
updateMessage(newMessage) {
this.message = newMessage;
}
}
}
</script>子组件：
<template>
<div>
<p>{{ message }}</p>
<button @click="updateMessage">Update Message</button>
</div>
</template>
<script>
export default {
name: 'ChildComponent',
data() {
return {
message: 'Hello World!'
}
},
methods: {
updateMessage() {
this.$parent.updateMessage('New Message');
}
}
}
</script>3. $refs
父组件可以通过ref属性给子组件设置一个引用，然后通过$refs获取到子组件的实例，从而调用子组件的方法或者访问子组件的属性。
父组件：
<template>
<div>
<child-component ref="child"></child-component>
</div>
</template>
<script>
import ChildComponent from './ChildComponent.vue';
export default {
name: 'ParentComponent',
components: {
ChildComponent
},
methods: {
updateMessage() {
this.$refs.child.updateMessage('New Message');
}
}
}
</script>子组件：
<template>
<div>
<p>{{ message }}</p>
<button @click="updateMessage">Update Message</button>
</div>
</template>
<script>
export default {
name: 'ChildComponent',
data() {
return {
message: 'Hello World!'
}
},
methods: {
updateMessage(newMessage) {
this.message = newMessage;
}
}
}
</script>到此这篇关于Vue父子组件通讯方式及实现方法的文章就介绍到这了,更多相关Vue父子组件通讯内容请搜索脚本之家以前的文章或继续浏览下面的相关文章希望大家以后多多支持脚本之家！