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

Posted yearshar

tags:

篇首语:本文由小常识网(cha138.com)小编为大家整理,主要介绍了vue组件中的几种传值方式----下篇相关的知识,希望对你有一定的参考价值。

上篇也总结了一下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组件中的几种传值方式----下篇的主要内容,如果未能解决你的问题,请参考以下文章

vue中请求的几种方式

Winfrom中的几种传值方式

ssmcrud关于修改put的几种传值方式(并不是最终版的集合

总结vue中组件相互传值的几种方式

Vue中组件间传值常用的几种方式

vue传值的几种方式