Vue组件之间传值的几种方法 (直接上代码)

web网页精选

已于 2022-07-20 16:37:39 修改

阅读量1.1k

点赞数 3

分类专栏：前端文章标签： vue.js javascript 前端

于 2022-07-20 16:35:43 首次发布

本文链接：https://blog.csdn.net/qq_43770056/article/details/125894363

版权

前端专栏收录该内容

66 篇文章 3 订阅

订阅专栏

本文总结了Vue中组件间常见的通信方式：1) 父组件通过props向子组件传递数据；2) 子组件使用$emit触发事件传递信息给父组件；3) 利用事件总线($on/$emit)实现非父子组件间的通信。详细展示了各种方法的代码实现。

摘要由CSDN通过智能技术生成

vue组件之间传值的几种方法总结

一. props（父传子）

父组件传递

<template>
  <div>
    <HelloWorld :msg="msg" />
  </div>
</template>

<script>
import HelloWorld from "./components/HelloWorld.vue";

export default {
  name: "App",
  data() {
    return {
      msg: "需要传递给儿子的数据",
    };
  },
  components: {
    HelloWorld,
  },
};
</script>

子组件接收

<template>
  <div >
    <h1>{{ msg }}</h1> 
  </div>
</template>

<script>
export default {
  name: 'HelloWorld',
  props: {
    msg: String
  }
}
</script>

二. $emit（子传父）

子组件传递

<template>
  <div>
    子组件
    <input type="text" v-model="changeVal" />
  </div>
</template>

<script>
export default {
  name: "HelloWorld",
  data() {
    return {
      changeVal: "",
    };
  },
  watch: {
    changeVal() {
      this.$emit("childInput", this.changeVal);
    },
  },
};
</script>

父组件接收

<template>
  <div>
    父组件{{msg}}
    <HelloWorld @childInput="getVal" />
  </div>
</template>

<script>
import HelloWorld from "./components/HelloWorld.vue";

export default {
  name: "App",
  data() {
    return {
      msg: "123456",
    };
  },
  methods: {
    getVal(msg) {
      this.msg = msg;
    },
  },
  components: {
    HelloWorld,
  },
};
</script>

三. $emit $on（非父子）

1.src文件夹新建common文件夹

2.common文件夹下新建bus.js文件

bus.js 写这个

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

兄弟1 传递

<template>
  <div>
    第一个 给兄弟的数据是:{{ msg }}
    <button @click="send">点击传递给兄弟数据</button>
  </div>
</template>

<script>
import bus from "@/common/bus";
export default {
  name: "HelloWorld",
  data() {
    return {
      msg: "6666666666",
    };
  },
  methods: {
    send() {
      bus.$emit("send", this.msg);
    },
  },
};
</script>

兄弟2 接收

<template>
  <div>第二个 {{ msg }}</div>
</template>

<script>
import bus from "@/common/bus";
export default {
  name: "HelloWorld",
  data() {
    return {
      msg: "",
    };
  },
  mounted() {
    bus.$on("send", (data) => {
      this.msg = data;
    });
  },
};
</script>