vue同级组件间传值

news/2024/7/10 2:04:30 标签: vue

1,1,在main.js同级 目录下新建eventBus.js文件

import Vue from "vue"
export default new Vue()

2,在组件a中传出值
首先我们需要引入我们新创建的eventBus.js文件,通过$emit传值

<template>
  <div class="A" @click="gotoB()">
    <h1>AAA</h1>
    <p>我是A中的a:【 {{ a }}</p>
  </div>
</template>

<script>
import EventBus from "../utils/eventBus.js";
export default {
  data() {
    return {
      a: "我是A的数据a",
    };
  },
  methods: {
    gotoB() {
      // 同级传递数据($emit:传递参数)
      EventBus.$emit("a", this.a);
    },
  },
};
</script>

3,在同级b组件中通过$on接收

<script>
    import EventBus from "../utils/eventBus.js";
    export default{
        created(){
            New.$on('a',data => {
                console.log(data)   // 我是A的数据a
            })
        }
    }
</script>

如果我们的项目大的话就直接用vuex吧!
这种 e m i t / emit/ emit/on的方法只适合小型的项目!


http://www.niftyadmin.cn/n/1521004.html

相关文章

javascript计算1-10000中0出现的次数,怎么写?

一个小算法题&#xff1a;用javascript计算1-10000中0出现的次数&#xff0c;我用循环写了一个方案&#xff0c;代码如下&#xff1a; function getZeroCount(num) {let count0;let regObj/0/g;for (let i1;i<num;i){let stri;let matchstr.match(regObj);countmatchnull?…

git拉取其他分支代码

git clone -b 分支名称 gitgitee.com:Lu-Sc/Travel.git就是这样操作的啦&#xff0c;你学会了吗&#xff1f;

【正则表达式】贪婪匹配与非贪婪匹配

例&#xff1a; 匹配输入串A: 1001000100 贪婪匹配&#xff1a; 使用 1.*1 将会匹配到10010001 非贪婪匹配&#xff1a; 使用 1.*?1 将会匹配到1001 主要区别在于是否加&#xff1f;当&#xff1f;紧随任何其他限定符之后时&#xff0c;匹配模式是"非贪心的"。“非…

ajax请求的五个步骤

1.创建一个XMLHttpRequest异步对象 2.设置请求方式和请求地址 3.接着&#xff0c;用send发送请求 4.监听状态变化 5.最后&#xff0c;接收返回的数据 <!DOCTYPE html> <html lang"en"><head><meta charset"UTF-8"><meta name&…

超详细的 JS 数组方法整理出来了

数组是 js 中最常用到的数据集合&#xff0c;其内置的方法有很多&#xff0c;熟练掌握这些方法&#xff0c;可以有效的提高我们的工作效率&#xff0c;同时对我们的代码质量也是有很大影响。 一、创建数组 1.使用数组字面量表示法 var arr4 []; //创建一个空数组 var arr5…

【Java】判断是否是Json格式

import com.google.gson.JsonElement; import com.google.gson.JsonParser;public class Test {public static void main(String[] args) {System.out.println(validate("{\"123\":\"123\"}"));}//如果是Json格式返回True&#xff0c;不是返回Fa…