一页图纸看懂Vue组件之间的交互_前端逻辑交互图

// …
}


现在 ComponentA 和 ComponentC 都可以在 ComponentB 的模板中使用了。


#### Prop


##### 传递静态或动态 Prop



props: {
title: String,//传入字符串
likes: Number,//传入数字
isPublished: Boolean,//传入布尔值
commentIds: Array,//传入数组
author: Object,//传入一个对象
callback: Function,//传入一个方法
contactsPromise: Promise // or any other constructor
}


##### 传入一个对象的所有property



post: {
id: 1,
title: ‘My Journey with Vue’
}




等价于




单向数据流的特点,尽可能使父组件和子组件的耦合性降低。


#### 非父子组件通信的几种方法:


##### 中央事件bus总线法


![在这里插入图片描述](https://img-blog.csdnimg.cn/2020070615501069.png?x-oss-process=image/watermark,type_ZmFuZ3poZW5naGVpdGk,shadow_10,text_aHR0cHM6Ly9ibG9nLmNzZG4ubmV0L3FxXzQzMjc3NDA0,size_16,color_FFFFFF,t_70)



var bus =new Vue();
Vue.component(‘component-a’,{
template:‘<button @click=“handleEvent”>传递事件’,
methods:{
handleEvent:function(){
bus.$emit(‘on-message’,‘来自组件component-a的内容’);

}
}
});



var app =new Vue(){
el:‘#app’,
data:{
message:‘’,
},
mounted:function(){
var _this=this;
bus.$on(‘on-message’,function(msg){
_this.message=msg;
});
}


首先创建了一个名为bus 的空Vue实例,全局语法定义了组件component-a,之后创建了Vue实例app,在app初始化时,即生命周期mounted钩子函数监听到了来自bus的事件on-message,在组件component-a,点击按钮会通过bus把事件on-message发出去,此时app就会接收到来自bus 的事件,进而在回调里完成业务逻辑。


上面的说法没什么毛病就是太复杂了。  
 简单分为几个模块和步骤来讲的话:


* 1.首先要有一个bus的中间件
* 2.在两个需要通信的非父子组件的组件中引入这个中间件
* 3.想要发送数据的组件通过vue的实例方法`$emit`发送事件名称和需要传递的数据,以上例子是挂载到mounted方法上。
* 4.被传递数据的组件,也就是本处的app实例,通过vue 实例方法`$on`监听到事件和接收数据。


清除bus:



beforeDestory(){
bus.$off(‘on-message’);
}


##### 父链访问


![在这里插入图片描述](https://img-blog.csdnimg.cn/20200706162735140.png)  
 在子组件中,使用this.$parent可以直接访问该组件的父实例或者组件,父组件也可以通过this.children访问它的所有子组件,而且可以递归向上或者向下无限访问。直到没有父组件或子组件。


但通过这种方式将大大地增加父子组件的耦合性,所以不建议使用。


##### 子组件索引


![在这里插入图片描述](https://img-blog.csdnimg.cn/20200706162519733.png?x-oss-process=image/watermark,type_ZmFuZ3poZW5naGVpdGk,shadow_10,text_aHR0cHM6Ly9ibG9nLmNzZG4ubmV0L3FxXzQzMjc3NDA0,size_16,color_FFFFFF,t_70)  
 子组件较多的情况,通过以上父链子链的形式已经很难找出我们需要的组件实例。  
 则可以在子组件的标签上用ref指定一个名称,comA,在父组件内通过this.$refs.comA来找到组件





Vue.component(‘component-a’,{
template:‘

子组件
’,
data:function(){
return{
message:‘子组件内容’
}
}
});

var app=new Vue({
el:‘#app’,
methods:{
handleRef:function(){
var msg=this.$refs.comA.message;
console.log(msg);
}
}
}
)


#### 插槽slot


为什么需要插槽?vue的实用和流行的核心便是组件化,但是共用并不能代替很多需求的完善,可能需要对组件进行自定义,这就出现了插槽。  
 ![在这里插入图片描述](https://img-blog.csdnimg.cn/20200706170552600.png?x-oss-process=image/watermark,type_ZmFuZ3poZW5naGVpdGk,shadow_10,text_aHR0cHM6Ly9ibG9nLmNzZG4ubmV0L3FxXzQzMjc3NDA0,size_16,color_FFFFFF,t_70)  
 简单来讲:  
 假设有一个名为comA的组件




此时组件经过渲染显示的是今天的天气是,此时你可能会想加入下雨,下雪等个性化定制的内容,但是直接在标签中写是没有作用的。


  • 9
    点赞
  • 5
    收藏
    觉得还不错? 一键收藏
  • 0
    评论

“相关推荐”对你有帮助么?

  • 非常没帮助
  • 没帮助
  • 一般
  • 有帮助
  • 非常有帮助
提交
评论
添加红包

请填写红包祝福语或标题

红包个数最小为10个

红包金额最低5元

当前余额3.43前往充值 >
需支付:10.00
成就一亿技术人!
领取后你会自动成为博主和红包主的粉丝 规则
hope_wisdom
发出的红包
实付
使用余额支付
点击重新获取
扫码支付
钱包余额 0

抵扣说明:

1.余额是钱包充值的虚拟货币,按照1:1的比例进行支付金额的抵扣。
2.余额无法直接购买下载,可以购买VIP、付费专栏及课程。

余额充值