vue 传值

Posted 2021-09-13 zhaojiaershao

vue2.0使用

1.创建一个文件名叫eventBus.js
该js文件的内容很简单，就是暴露一个vue实例而已。

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

有人喜欢在main.js全局引入该js文件，我一般在需要使用到组件中引入。按需引入,哪里需要哪里引入

父组件中注册并使用子组件：

<template>
  <div>
    <Tow />
    <One />
  </div>
</template>

<script>
import One from "../component/one";
import Tow from "../component/noe2";
export default {
  data() {
    return {};
  },
  components: { One, Tow },
};
</script>

分别在子组件one和two中引入eventBus.js

<template>
  <div>
    <button @click="sendClick">发送</button>
  </div>
</template>
<script>
import bus from "../utils/eventBus";
export default {
  data() {
    return {};
  },
  methods: {
    sendClick: function () {
    $emit第一个参数,要和$on第一个参数一致
      bus.$emit("send", "我来了");
      // console.log(1);
    },
  },
};
</script>

<template>
  <div>
    <button @click="res">接收</button>
  </div>
</template>

<script>
import bus from "../utils/eventBus";
export default {
  data() {
    return {};
  },
  methods: {
    res: function () {
    接收one组件传过来的值,send标识需要和one组件保持一致
      bus.$on("send", (data) => {
      data:one组件传过来的值
        console.log(data); // 我来了
      });
    },
  },
  mounted() {
    this.res();
  },
};
</script>

vue3.0使用

• Vue到3.0之后的Bus的方式变成了使用mitt。2.0是通过创建一个空的Vue来作为总线
• Vue3.0中使用emit来注册 bus.emit(‘事件’,参数)
• Vue3.0中使用on来监听，bus.on(‘taskLrowClick’, (e)=>{ console.log(e)；其他的逻辑操作 })
• emit和on是成对出现的，一个发起，一个接收，并且接收方可以是多个组件，只要第一个参数匹配，都可以接收到

使用建议

可以在main.js里面全局引入，但是不建议全局引入，因为Vue3.0是通过getCurrentInstance 方法去获取组件实例来完成一些主要功能，但是大家不要依赖 getCurrentInstance 方法去获取组件实例来完成一些主要功能，否则在项目打包后，一定会报错的。

按需引入，那个组件需要就在哪里引入

1.安装mitt
npm install --save mitt
2.在src目录下创建utils文件夹文件夹下创建index.js文件

import mitt from \'mitt\'
const bus = mitt()
export default bus

来个示例:

<template>
  <div>
    <One></One>
    <Tow></Tow>
  </div>
</template>

<script>
import One from "../components/bus/one.vue";
import Tow from "../components/bus/tow.vue";
export default {
  components: {
    One,
    Tow,
  },
};
</script>

one.vue组件

<template>
  <button @click="busClick">点我传值</button>
</template>

<script>
import bus from "../../utils/eventBus";
export default {
  setup() {
    const busClick = () => {
      bus.emit("busSend", 123456);
    };
    return {
      busClick,
    };
  },
};
</script>

tow.vue组件

<script>
import { onMounted } from "vue";
import bus from "../../utils/eventBus";
export default {
  setup() {
    onMounted(() => {
      bus.on("busSend", (data) => {
        console.log(data); // 123456
      });
    });
  },
};
</script>