码迷,mamicode.com
首页 > 其他好文 > 详细

vue组件中的几种传值方式----下篇

时间:2019-11-28 23:10:33      阅读:76      评论:0      收藏:0      [点我收藏+]

标签:tor   each   实践   this   管理   store   org   分发   llb   

上篇也总结了一下vue组件中的传值方式,父子组件,兄弟组件,隔代组件等,这篇总结了事件总线 Bus,

vuex(简单的了解了一下,具体写法看官网:https://vuex.vuejs.org/),插槽的用法。

任意两个组件之间:事件总线 或 vuex 

 事件总线: 创建一个Bus负责事件预发,监听和回调管理

//Bus:事件派发,监听和回调管理
class Bus{
  constructor(){
    this.callbacks={}
  }  
  $on(name,fn){
    this.callbacks[name]=this.callbacks[name]||[]
    this.callbacks[name].push(fn)
  }

 $emit(name,args){
   if(this.callbacks[name]){
     this.callback[name].forEach(cb=>cb(args))
   }
 }
}

//main.js
Vue.prototype.$bus=new Bus()

//child1
this.$bus.$on(‘foo‘,handle)

//child2
this.$bus.$emit(‘foo‘)

ps:实践中可以用Vue代替Bus。因为它已经实现了相应功能

  

Vuex:创建唯一的全局数据管理者store,通过它管理数据并通知组件状态变更

 

 

插槽

插槽语法是Vue实现的内容分发API,用于复合组件开发,该技术在通用组件库开发中有大量应用

vue2.6.0之后采用全新v-slot语法取代之前的slot,slot-scope

 

匿名插槽

  

//child  子组件会将父组件提供的内容分发
 <p>
  <slot></slot>
</p>


//parent 父组件提供内容
<child>hello</child>

 

  具名插槽

将内容分发到子组件指定位置

//child
 <div>
  <slot></slot>
  <slot name="centent"></slot>
 </div>



//parent
  <child>
  <!--默认插槽用default做参数-->
    <template v-slot:default>具名插槽</template>
  <!--具名插槽用插槽名做参数-->
    <template v-slot:centent>内容……</template>
  </child>

  

作用域插槽

分发内容要用到子组件中的数据(数据来自子组件,需要在父组件中进行加工)

//child
<div>
    <slot :foo="foo"></slot>
</div>    

//parent
 <child>
  <template v-slot:default="slotProps">
   来自子组件数据:{{slotProps.foo}}
  </template>

<!--可以直接解构-->
<template v-slot:default="{foo}"> 来自子组件数据:{{foo}} </template>
 </child>

  

vue组件中的几种传值方式----下篇

标签:tor   each   实践   this   管理   store   org   分发   llb   

原文地址:https://www.cnblogs.com/yearshar/p/11954210.html

(0)
(0)
   
举报
评论 一句话评论(0
登录后才能评论!
© 2014 mamicode.com 版权所有  联系我们:gaon5@hotmail.com
迷上了代码!