vue父子组件通信方式哪几种

<>第一种：props和$emit()

parent.vue
<template> <div id="app"> <div>父组件：{{message}}</div> <ChildrenComponet
:message="message" @changeMsgFn="message=$event"/> </div> </template> <script>
import ChildrenComponet from './components/ChildrenComponet.vue' export default
{ name: 'App', data(){ return{ message:'默认数据' } }, components: {
ChildrenComponet }, methods:{ changeMessage(msg){ console.log(msg) this.message
= 'Bye'; } } } </script>
children.vue
<template> <div> 子组件：{{message}} <button @click="handleClick">按钮</button>
</div> </template> <script> export default { props:['message'], methods:{
handleClick(){ this.$emit('changeMsgFn','Bye') } } } </script> <style> </style>
按按钮之前：

按按钮之后：

<>第二种，回调函数callback

parent.vue
<template> <div id="app"> ------父组件------ {{message}} <ChildrenComponet
:message="message" :changeMsgFn="changeMessage"/> </div> </template> <script>
import ChildrenComponet from './components/ChildrenComponet.vue' export default
{ name: 'App', data(){ return{ message: 'hello!' } }, components: {
ChildrenComponet }, methods:{ changeMessage(){ this.message = 'Bye' } } }
</script> <template> <div> ------子组件------ {{message}} <button
@click="changeMsgFn">按钮</button> </div> </template> <script> // import
GrandChild from './GrandChild.vue' export default { props: ['message',
'changeMsgFn'], components:{ // GrandChild }, data(){ return { } }, methods:{ }
} </script>
点击按钮前：

点击按钮后：

<>第三种，$parent和$children

parent.vue
<template> <div id="app"> <div>父组件：{{message}}</div> <ChildrenComponet
:message="message"/> <button @click="changeChildrenNumber">改变子number</button>
</div> </template> <script> import ChildrenComponet from
'./components/ChildrenComponet.vue' export default { name: 'App', data(){
return{ message:'默认数据' } }, components: { ChildrenComponet }, methods:{
changeChildrenNumber(){ this.$children[0].number = 50 } } } </script>
children.vue
<template> <div> 子组件：{{number}} <button @click="handleClick">按钮</button>
</div> </template> <script> export default { data(){ return { number:'初始number'
} }, props:['message'], methods:{ handleClick(){ this.$parent[0].message =
'测试$parent，我是子组件' } } } </script> <style> </style>
点击“改变子number”前：

点击“改变子number”后

children.vue
<template> <div> 子组件：{{number}} <button
@click="handleClick">改变父number，测试$parent</button> </div> </template> <script>
export default { data(){ return { number:'初始number' } }, methods:{
handleClick(){ this.$parent.message = '改变$parent成功' } } } </script> <style>
</style>
parent.vue
<template> <div id="app"> <img alt="Vue logo" src="./assets/logo.png">
<div>父组件：{{message}}</div> <ChildrenComponet/> <button
@click="changeChildrenNumber">改变子number</button> </div> </template> <script>
import ChildrenComponet from './components/ChildrenComponet.vue' export default
{ name: 'App', data(){ return{ message:'默认数据' } }, components: {
ChildrenComponet }, methods:{ changeChildrenNumber(){ this.$children[0].number
= 50 } } } </script>
点击前：

点击后：

<>第四种，provide和inject

parent.vue
<template> <div id="app"> <ChildrenComponet/> </div> </template> <script>
import ChildrenComponet from './components/ChildrenComponet.vue' export default
{ name: 'App', data(){ return{ } }, provide:{ message:"hello" }, components: {
ChildrenComponet }, methods:{ } } </script>
children.vue
<template> <div> 子组件：{{message}} </div> </template> <script> export default {
inject:['message'], data(){ return { } }, methods:{ } } </script>
运行结果：

<>第五种，$attrs+$listeners

parent.vue
<template> <div id="app"> ------父组件------ <div>姓名:{{ name }}</div> <div>年龄:{{
age }}</div> <ChildrenComponet :name="name" :age="age"
@changeName="changeName"/> </div> </template> <script> import ChildrenComponet
from './components/ChildrenComponet.vue' export default { name: 'App', data(){
return{ name:'小米', age: 33, } }, components: { ChildrenComponet }, methods:{
changeName(){ this.name = '小夏' } } } </script>
children.vue
<template> <div> ------子组件------ <button
@click="$listeners.changeName">按钮</button> <GrandChild v-bind="$attrs" />
</div> </template> <script> import GrandChild from './GrandChild.vue' export
default { components:{ GrandChild }, data(){ return { } }, methods:{ } }
</script>
GrandChildren.vue
<template> <div> ------孙组件------ 姓名：{{$attrs.name}} 年龄：{{$attrs.age}} </div>
</template> <script> export default { } </script> <style> </style>
运行结果（从父亲传到了孙子）：

点击按钮后：

<>第六种，ref

parent.vue
<template> <div id="app"> ------父组件------ <ChildrenComponet ref="childComp"/>
<button @click="changeName">按钮</button> </div> </template> <script> import
ChildrenComponet from './components/ChildrenComponet.vue' export default {
name: 'App', data(){ return{ name:'小米', age: 33, } }, components: {
ChildrenComponet }, methods:{ changeName(){ console.log('点击前',
this.$refs.childComp.age) this.$refs.childComp.changeAge() console.log('点击后',
this.$refs.childComp.age) } } } </script>
children.vue
<template> <div> ------子组件------ </div> </template> <script> // import
GrandChild from './GrandChild.vue' export default { components:{ // GrandChild
}, data(){ return { age:20 } }, methods:{ changeAge(){ this.age = 50 } } }
</script>
点击后：

• « 上一篇：Vue简单练手案例
• » 下一篇：华为hcip认证考试内容是什么？hcip认证有哪些方向