Vue组件通信应知必知
前言 本章我们来学习Vue组件通信中的可以算是所有内容,在此之前,您最好掌握Vue的基础语法、指令等内容,同时也建议您查看我其他的文章进行补充。 组件通信 父子组件关系 通过上图顺带给大家说明了父子组件的实现原理,以及组件间传值传DOM的实现思路,那么我们看看Vue的代码来感受一下 父向子传值 模板部分(此处传值也能使用组件内的变量) <div id="app"> <!-- 传递一个字符串常量haha --> <son v-bind:text="'haha'"/> </div> js部分 // 子组件 var Son = { // 要接收的字段名称 props:['text'], template:` <div> {{ text }} </div>` }; Vue.component('son',Son); // 父组件 new Vue({ el:'#app' }); 显示结果很显然是子组件的haha 子向父通信 试想一种情况,由父组件控制子组件的显示,而从子组件中点击X来实现子组件的隐藏,那么实际的控制权确实在父组件 要处理这个问题,大家第一反应应该就是相当通过子组件的点击事件,拿到父组件内控制显示与隐藏的变量并更改就可以了 代码如下 // 隐藏按钮点击函数 methods:{ clickChild(){ this.$parent.isShow = false; } }