68. 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>