vue.js单文件组件中非父子组件的传值

最近在研究vue.js，总体来说还算可以，但是在web开发群里有一些人问在单文件组件开发模式中非父子组件如何传值的问题，今天在这里讲讲，希望对大家有所帮助！
在官网api中的这段讲解很少，也很模糊；官网中说明如下：

非父子组件通信：
有时候两个组件也需要通信 (非父子关系)。在简单的场景下，可以使用一个空的 Vue 实例作为中央事件总线：
var bus = new Vue()；
// 触发组件 A 中的事件
bus.$emit('id-selected', 1)
// 在组件 B 创建的钩子中监听事件
bus.$on('id-selected', function (id) {// ...
})

那么这一段在单文件组件开发模式中具体怎么用呢？
首先在main.js中加入data,如下：

new Vue({el: '#app',router,template: '<App/>',components: { App },data:{bus:new Vue()}
})

如何获取到这个空的vue对象 bus呢.在组件里面直接调用这个this.$root

<template><div class="title" @click="change(msg)">{{ msg }}</div>
</template>
<script>export default {name: 'first',data() {return {msg: '我是首页'}},methods: {change(text) {this.$root.bus.$emit("hehe", text)}}}</script>

然后在另一个组件内调用on事件接收,当然在组件销毁时解除绑定,使用on事件接收,当然在组件销毁时解除绑定,使用off方法

<template><h1>{{ msg }}</h1>
</template>
<script>export default {name: 'second',data() {return {msg: '我是第二页'}},created() {let that = this;this.$root.bus.$on("hehe", function (t) {that.msg = that.msg + t})}}</script>

然后点击的时候就能传递值了，还等什么，快来试试吧！欢迎加入前端交流群496522155，备注：前端
希望对你有帮助，~溜了~

原文：https://blog.csdn.net/weixin_37794497/article/details/77337613　　

转载于:https://www.cnblogs.com/robinunix/p/10876789.html

vue.js单文件组件中非父子组件的传值相关推荐

Vue.js 单文件组件
单文件组件介绍在很多 Vue 项目中,我们使用 Vue.component 来定义全局组件,紧接着用 new Vue({ el: '#container '}) 在每个页面内指定一个容器元素. 这 ...
丁鹿学堂：前端进阶学习vue3最新教程之vue的单文件组件深入理解
在vue3中,template模版中的html代码,并不能直接在网页中执行,而是会在项目运行时,在浏览器中被编译为js 的函数去执行. 问题:在template模版中写html,体验很差,智能提示都不 ...
vue中非父子组件传值
vue中非父子组件传值我们使用 $emit发送数据使用 $on监听数据vue非父子组件传值1 创建公共实例化对象const bus=new Vue()2 在需要发送数据的组件中自定义方法使用bus ...
浏览器调用 vue 组件_父子组件的通信
在前端vue框架中,我们常常使用多个页面组成一个组件来创建项目.每个组件都有其自己的功能,基于组件的体系结构使开发和维护应用程序变得容易.在开发过程中,您可能会遇到需要与其他组件共享数据的情况.在本文 ...
vue的组件化+父子组件的通信
文章目录 1.注册组件的基本步骤 1.1 原始的创建方法 1.2语法糖创建方法 2.全局组件与局部组件 2.1 全局组件 2.2 局部组件 2.3语法糖局部组件(最简写法) 3. 父子组件 4.组件中 ...
vue.js render函数怎么传入自定义组件
vue.js render函数怎么传入自定义组件和定义子组件的用法一样 import Test from '@/components/Test' export default { render:(h ...
vue上传zip文件到服务器,vue.js zip文件上传
vue.js zip文件上传内容精选换一换开发过程中,您有任何问题可以在github上提交issue,或者在华为云对象存储服务论坛中发帖求助.接口参考文档详细介绍了每个接口的参数和使用方法.在O ...
组件之间父子组件传值
组件之间父子组件传值在components新建父组件和子组件在父组件里引入子组件子组件接收父组件中的数据,用props 在子类props里定义接收的参数在子组件标签上引用然后在父组件写上准备 ...
html引用单文件组件,vue之单文件组件纯网页方式引入
上一节的vue组件开发是把组件内容统一放到了一个js文件里面里面写上模板字符串(引用组件) 这种方式还需要拼接转义写法非常丑陋 vue贴心的帮我们封装了单文件组件可以不用再模板里面拼接字符串下 ...

vue.js单文件组件中非父子组件的传值

vue.js单文件组件中非父子组件的传值相关推荐

最新文章

热门文章