理解$parent和$children
想要Vue组件之间互动吗？试试看$parent和$children这对好搭档！$parent就代表你现在所在的组件，而$children就是它下面所有的小宝宝。用好了它们，数据传输、方法调用都不在话下！
使用场景
平常编程序，总是会用到$parent跟$children这两货色呗，简单说，就是父组件和子组件间的“聊天”器官！比如说咱们搞个超复杂的网页，里面各种组件繁多无比，想把某个数据发出去，或者让它们互相打招呼啥的，那就得靠这两个好伙伴了；再说呐，有时候需要动态添加或删除些子组件，还是它俩来帮忙搞定。
示例演示
咱们就拿实际场景来给你说说这儿的$parent和$children是怎么传递信息的。你看，咱们就假设ParentComponent和ChildComponent分别代表爸爸和孩子。他们俩要想互动，比如爸爸给你发条短信，还要能够互相及时收到回复。
父组件代码：
javascript
<h2>Parent Component</h2>
{{ parentData }}
孩子组件就是从"./ChildComponent.vue"这个地方拉过来的。
export default {
data(){
return {
父母说：'从父母那儿来的问候，大家好'
childData:'',
};
},
components:{
父组件
父组件的数据：{{ parentData }}
import ChildComponent from "./ChildComponent.vue"
export default {
components: {
ChildComponent
},
data() {
return {
parentData: "父组件初始数据"
}
},
methods: {
handleChange(newData) {
this.parentData = newData
}
}
}
ChildComponent,
methods:{
handleChange(data){
this.childData = data;
},
};
子组件代码：
<h3>Child Component</h3>
{{ childData }}
props:[‘childData’],
handleClick(){
子组件
子组件的数据：{{ childData }}
export default {
props: {
childData: {
type: String,
required: true
}
},
methods: {
handleClick() {
const newData = this.childData + "（已修改）"
this.$emit("change", newData)
}
}
}
我们来说说”Hello from Child”的新数据！
直接发个消息，把新数据给他们。
你看到没有，父亲组件ParentComponent里面藏着个叫 parentData 的宝贝，然后我们把这玩意儿当作给孩子（也就是child）的礼物props传过去。等孩子那边的按钮一按下，handleClick这个小助手就开始上场工作喽，调整完数据后，瞬间以$emit方式发送给父亲组件。
通讯原理解析
老爸和儿子间的交流，就是靠着$parent和$children这两个神奇代码！老爸就这么坐着守候，儿子动静大了，他立马就知道；当然，老爸不是光看着，他有时候还得叫叫儿子，让他别偷懒。儿子，就发个$emit信号给老爸，办事成功。
注意事项
用$parent跟$children的时候，要留个心眼：
别用过了头哦:$parent 和$children 这两个东西用多了有时候会让代码显得有点儿乱，所以记得稍微克制点儿哈。
你别瞎搞啊：随意修改父子组件间的数据和方法可能导致它们关系太亲近了，设计时要注意点儿
名字规定：搞事件的名字最好用有点代表性的词，别让人搞不清到底是什么事就好了。
其他通讯方式
除了$parent和$child这种方法，Vue还有其它办法让不同层级和不相邻的组件交流。比如，我们可以借助Vuex管理全局状态；用EventBus处理各种各样的事件；通过provide和inject在各个层面之间传数据。
总结与展望
看完这篇文章后，咱就学会怎么用Vue的$parent和$children来传递信息，不仅可以传数据还能互相调用方法。但是嘞，记得挑最适合自己需求的通信方式
这篇文章就是想告诉你Vue中父子组件是咋沟通的，然后再教你怎么把学到的用到实际项目里去最后，还得问问你们有没有这样的需求，要用到$parent和$children通讯呢?
评论0