Vue非父子组件传值「建议收藏」

Vue非父子组件传值「建议收藏」Vue非父子组件传值:事件总线$attrs/listeners

大家好,又见面了,我是你们的朋友全栈君。

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


前言

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


一、非父子组件传值

(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传值有更好的理解。

版权声明:本文内容由互联网用户自发贡献,该文观点仅代表作者本人。本站仅提供信息存储空间服务,不拥有所有权,不承担相关法律责任。如发现本站有涉嫌侵权/违法违规的内容, 请发送邮件至 举报,一经查实,本站将立刻删除。

发布者:全栈程序员-用户IM,转载请注明出处:https://javaforall.cn/145796.html原文链接:https://javaforall.cn

【正版授权,激活自己账号】: Jetbrains全家桶Ide使用,1年售后保障,每天仅需1毛

【官方授权 正版激活】: 官方授权 正版激活 支持Jetbrains家族下所有IDE 使用个人JB账号...

(0)
blank

相关推荐

  • 简述vue和jquery的区别「建议收藏」

    简述vue和jquery的区别「建议收藏」⾸先呢jquery他是⽤js封装的⼀个类库,主要是为了⽅便操作dom元素,⽽vue他是⼀个框架,并且呢,他会从真实dom构建出⼀个虚拟的dom树,通过di!算法渲染只发⽣改变的dom元素,其他的相同的dom元素不⽤在重新渲染.⽽使⽤jquery去改变dom元素的时候,即使有相同的dom元素也会重新渲染,jq重点操作dom,而vue重点操作数据;简单的来说就是:jquery是通过使用选择器($)选取dom对象,进行dom对象的操作,实现数据操作;它

    2022年10月16日
  • inception v3网络_Netmarble

    inception v3网络_Netmarble本文叙述了CNN历史以来的发展模型,介绍了发展流程以及发展路线,并对比了各种Inception模型区别,详细介绍了Inceptionv3模型,读者可以轻松了解到Inception模型的发展情况。

  • vuecli安装_离线安装vuecli

    vuecli安装_离线安装vuecli前言vue-cli是和vue进行深度组合的工具,可以快速帮我们创建vue项目,并且把一些脚手架相关的代码给我们创建好。真正使用vue开发项目,都是用vue-cli来创建项目的。vue-cli介绍

  • tortoisegit 创建远程分支_git强制切换分支

    tortoisegit 创建远程分支_git强制切换分支公司项目GIT中有好几个分支,第一次使用提交错了,被教育了研究出来并记录一下使用TortoiseGit切换远程分支的方法第一步第二步

  • treetable php,jQuery树型表格插件jQuery treetable

    treetable php,jQuery树型表格插件jQuery treetable插件描述:jQuery-treetable是一个jQuery插件。有了这个插件,你可以在一个HTML表格中显示树,即目录结构或嵌套列表。它使你的HTML文件干净的,展现出树状表格插件,你只需要每一行数据添加特定的数据属性。jQuery-treetable有了这个插件,你可以在一个HTML表格中显示树,即目录结构或嵌套列表。它使你的HTML文件干净的,展现出树状表格插件,你只需要每一行数据添加特定的…

  • undefined reference to ‘main’

    undefined reference to ‘main’

发表回复

您的电子邮箱地址不会被公开。

关注全栈程序员社区公众号