前端知识点vue开发干货vue

Vue 非父子传参(兄弟组件)bus中央总线 精彩demo

2019-09-29  本文已影响0人  顺小星

首先,新建一个js文件,并在两个组件中引入。如下图:

两个子组件与中央总线

js文件里写一个空壳,如下:

import Vue from 'vue'

export default new Vue;

一、父组件中,注册两个子组件并使用。格局安排如下:

 <div class="big">
      <Son1></Son1>
      <Son2></Son2>
</div>

二、son1组件中,点击一次传递信息给son2。

html中:

<div @click="clickSon">子组件一号,点我传值,再点消失</div>

js中:用emit通过bus发送数据,暗号 “aaa”

import Bus from '../bus/index'
data() {
    return {
      son1Message: {
        isShow: true,
        info: "我是来自一号组件的大魔王阿星!"
      }
    };
  },
  methods: {
    clickSon() {
      this.son1Message.isShow = !this.son1Message.isShow;
      Bus.$emit("aaa", this.son1Message);
    }
  }

三、son2中,在created中

js中:对上son1中 “aaa” 的暗号,拿过来在data中定义变量去接

import Bus from '../bus/index'
data(){
        return{
            isShow:'',
            son2Message:""
        }
    },
    created(){
        Bus.$on("aaa",res=>{
            this.isShow = res.isShow
            this.son2Message = res.info
        })
    },

html中:

<div class="son2">
      子组件二号
      <div v-if="isShow">{{son2Message}}</div>
  </div>

其中v-if="isShow"是控制点击出现,再点击消失的

效果:

初始:


初始状态

点击一次:


点击一次
点击两次:
所传值消失

总结:

1、新建一个空的 js :

import Vue from 'vue'
export default new Vue;

2、在两个子页面中分别导入:

import Bus from '../bus/index'

3、在输出组件中设定一个点击方法(或其他):


通过Bus设置暗号,并发送

4、在接收组件总对上暗号,并接收:

通过Bus对上暗号,并接收

就是他妈的这么简单

上一篇下一篇

猜你喜欢

热点阅读