组件嵌套传值/非父子组件传值

多组件嵌套props传值即可，但是如果非父子组件传值，借鉴别人的办法（万分感谢），给要传值的几个页面引入同一个bus.js,或者在main.js中 export var bus = new Vue()，如果报错$emit没有定义什么的就是路径问题

import {bus} form './main'

接着

//需要传送值的地方：
bus.$emit("a",值)

//需要接收的vue中同样引入，然后
bus.$on("a",(data)=>{
   //回调
    this.b=data
})

---

真好，传来传去页面太多差点精神错乱了，总结起来怎么就几个字的事情？？？

在项目中具体使用场景：

 

alert封装、调用、嵌套、传值 

用到这个东西的缘故是老大说封装一个alert，然后日历、小贴士，list啥的通过点击 “组件1”  弹出 alert触发，alert作为一个载体，承载其他组件。刚刚将功能实现，记录一下

alert.vue

  <div class="alert-mask" @click.self="close" v-show="show">
      <div class="alert"  >
        <div :class="[title?title:'']">{{title}}</div>
        <div class="body">
          <p>{{text}}</p>
          <component  v-bind:is="comp" ></component>
        </div>
        <div :class="[confirmMsg?footer:'']" @click="close">{{confirmMsg}}</div>
      </div>
  </div>

  data () {
    return {
      //show在data
      show: false
    }
  },

 

alert.js

import al from './文件.vue'
let Al = {} // 此处是弹窗空对象
let vm = null // vue实例
Al.install = (Vue, options) => {
  if (!vm) {
    // Vue.extend=》扩展实例构造器，挂载到div元素上
    const Al= Vue.extend(al)
    vm = new Al({
      el: document.createElement('div')
    })
  }
  const alertPl = {
    show (options = {}) { // 参数
      vm.show = true
      if (options) {
        //此处添加参数
        options.el.appendChild(vm.$el)
      }
    },
    hide (el) {
      vm.show = false
    }
  }
}
export default AlertPlug

定义的时候尽量不用alert，避免莫名其妙的冲突 

调用 

周报list组件点击后在js中调用，this.$alertPI.show()

关闭弹窗：this.$alertPI.hide()

向alert内部传递一个组件 

给alert传递的参数中需传递一个组件名称

，

       alert中<component v-bind:is="comp"></component>用来展示组件，而且alert中得引入要调的所有组件，再通过comp接收的组件名字决定渲染哪一个，为什么要这样呢，因为凭我有限的本事，没其他办法了，尝试给comp传递一个组件<v-comp :title="title"></v-comp>但是行不通，同事尝试出了<component>，真机智

        接下来解决的是不同的组件需要传递不一样的参数，解决方法就是给alert的参数中添加一个plugVal对象，alert.js中

alert.vue中需要接收，alert中的组件list要用，那么就在<component :a="plugVal> ，一下，然后在list中props一下

对于内部组件不显示问题：由于alert参数中调用alert后vm.show=false，在alert的 component标签上绑定一个 :visible.sync="show"，传给组件list，

接收：

    show: {
      type: Boolean,
      default: true
    }

为什么要true，因为false不行

 

 

 

调用alert时动画失效

在之前的alert插件中加了动画效果，但是发现改为js调用后动画效果没有了

  <div class="alert-mask" @click.self="close" v-show="show">
    <transition :duration="1588" appear
      enter-active-class="animated bounceIn"> 
      <div class="alert">
        
      </div>
    </transition>
  </div>

解决办法，直接将动画的class添加到div上而非transition上

  <div class="alert-mask" @click.self="close" v-show="show">
      <div class="alert animated bounceIn">
      </div>
  </div>