vue组件间传参兄弟组件传参 bus传参

最新推荐文章于 2024-11-08 14:52:31 发布

原创最新推荐文章于 2024-11-08 14:52:31 发布 · 1.4k 阅读

8 ·

CC 4.0 BY-SA版权

文章标签：

#vu组件传参 #兄弟组件传参 #bus.js传参

vue 同时被 3 个专栏收录

10 篇文章

订阅专栏

js方法

6 篇文章

订阅专栏

传参

3 篇文章

订阅专栏

博客介绍了Vue组件传参相关内容，主要讲述通过Bus.js实现兄弟组件传参的方法，包括创建Bus.js并挂载一个Vue实例，以及引入要使用的兄弟组件，还提及有相关效果图。

摘要生成于 C知道，由 DeepSeek-R1 满血版支持，前往体验 >

1、创建Bus.js。

挂载一个vue实例

import Vue from 'Vue'

export default new Vue()

2.引入要用的组件（组件one和组件two是兄弟组件）想通过bus.js传参。

one组件

<template>
  <div>one组件
      <input v-model="oneMsg" />
  </div>
</template>
<script>
import Bus from "@/common/bus"
export default {
  data() {
    return {
      oneMsg: ''
    }
  },
  computed: {
  },
  updated() {
   // 1.msg是全局变量，如果要使用多次bus.js 注意变量名不能相同。
   // 2.$emit发送消息oneMsg
    Bus.$emit("msg", this.oneMsg);
  }
}
</script>

two组件

<template>
  <div>two组件接受one的数据:{{twoMsg}}</div>
</template>
<script>
import Bus from "@/common/bus"
export default {
  data() {
    return {
      twoMsg: ''
    }
  },
  mounted() {
    // $on接收msg
    Bus.$on("msg", data => {
      this.twoMsg = data;
    });
  }
}
</script>

效果图：