Vue非父子组件传值

提示:文章写完后,目录可以自动生成,如何生成可参考右边的帮助文档

文章目录

  • 前言
  • 一、非父子组件传值
  • 二、事件总线
    • 2.$attrs / listeners
    • VueX是笔者认为最稳定的非父子传值的方法,笔者也会单独写出文章详解
  • 总结


前言

本节紧接这上一篇,说说如何在非父子组件中进行组件之间的传值


一、非父子组件传值

(1)事件总线
(2)$attrs / listeners

二、事件总线

事件总线的原理就是:

创建一个公共的Js文件,让其专门负责传值。就像公共的交通工具bus,data可以乘坐这辆bus到达指定的站台(相应的组件)

那么首先要做的就是在我们的项目中创造这辆bus

1.闭门造车(创建公用JS文件)

首先得在城市中(src目录下)租块地(创建一个文件夹),放置这辆bus。
bus.js的创建十分简单,只要粘贴以下代码:

import Vue from 'vue';
export default new Vue;

当然造车的方法有很多种,笔者只想给你最便捷的一种。

2.上车

既然坐车就要刷卡,刷卡的方式也很简单,在需要传递数据的组件中引入bus.js

import bus from './bus.js'

之后bus出发,在该组件中发射事件,发射事件需要一个媒介,在本篇就用button的click事件触发:

<button @click="appmsg">bus传递data</button>

在methods中定义事件:

 methods:{
    appmsg(){
      bus.$emit('getonbus','App')
    }
  }

上车出发过程完成

3.下车

下车也要刷卡,方式相同,在需要接收数据的组件中引入bus.js

import bus from './bus.js'

在示例中提前定义了一个变量value

data(){
    return{
      value:"Home"
    }
  }

到站接收数据,在接收组件的mounted中接收,代码如下:

mounted(){
    bus.$on('getonbus', val => {
      this.value = val
    })
  }

至此我们已经完成了数据的传输,我们来看看效果:
html代码:

<p>{{value}}</p>

效果:
点击前:
在这里插入图片描述

点击后:
在这里插入图片描述
这确实是一个十分方便的方法,但是:
事件总线方式传递数据同时需要及时的移除事件监听,这对于初学者是个麻烦事,因此
换种方法往下看吧,哈哈

2.$attrs / listeners

这种传值方式主要是用于多级组件的传值,其实还是得保持一种“血脉联系”
例如爷爷组件给孙子组件传值,当然这借助简单的v-bind也是可以实现的,但是如果我们就是想跳过父组件就可以用这种方式;

在示例中的组件关系如下:Home(爷爷)>parent(父亲)>child(孩子)
在Home中定义数据,并传入parent:

<template>
  <div class="home">
    <p>{{value}}</p>
    <parent :msga="a" :msgb="b" :msgc ="c"></parent>
  </div>
</template>

<script>
import parent from './parent.vue'
export default {
  name: 'home',
  components: {
    parent
  },
  data(){
    return{
      value:"Home",
      a:"aaa",
      b:"bbb",
      c:"ccc"
    }
  }
}
</script>

在父组件中需要定义一个v-bind

<template>
    <div>
        <child v-bind="$attrs"></child>
    </div>
</template>

在孙子组件中打印$attrs

mounted(){
            console.log(this.$attrs)
        }

我们来看打印台结果:
在这里插入图片描述
孙子得到了爷爷全部的数据,真正的隔代亲!
$listeners大家自己可以试试,爷爷会直接得到孙子发射的事件。
这种方法可以看成props / $emit的延续版,对比学习,效果更佳

VueX是笔者认为最稳定的非父子传值的方法,笔者也会单独写出文章详解

总结

本篇主要讲解了非父子传值的两种方法,深入浅出,让大家对vue传值有更好的理解。

你可能感兴趣的:(vue.js,javascript,前端)