<>第一种: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>
点击后:

技术
下载桌面版
GitHub
百度网盘(提取码:draw)
Gitee
云服务器优惠
阿里云优惠券
腾讯云优惠券
华为云优惠券
站点信息
问题反馈
邮箱:[email protected]
QQ群:766591547
关注微信