vue组件之间传值

164 阅读1分钟

vue项目中,组件都具有复用性,那么复用组件中的data也会有所不同,这时就需要组件之间来传递参数;

1.父传子

父组件中先引入并注册子组件,再通过v-bind(简写为“:”)绑定需要传递给子组件的数据

<Son :parent="parent_data" />

import Son from "@/components/son";
export default {
  components: { Son },
  data() {
    return {
      parent_data: "这是父组件的数据",
    };
  },
};

子组件通过props做接收,之后就可以在视图中使用了

props: ["parent"],

如果接收的数据需要指定类型,写成对象的形式就可以了,其中required表示是否必传,type表示数据类型,default表示默认值

props: {
    parent: {
      required: false,
      type: String,
      default: "默认值",
    },
  },

这时,如果父组件传递引用类型,子组件中把数据修改了,那么父组件对于的值也相应修改了,这和js的数据存储有关系,解决方法是修改前做一次深拷贝;可以参考:

2.子传父

子组件通过$emit触发父组件中的自定义事件来传递数据

data() {
    return {
      son_data: "这是子组件数据",
    };
  },
  methods: {
    change() {
      this.$emit('son',this.son_data);
    },
  },

父组件自定义事件触发的函数中参数就是子组件传递过来的值,

<Son @son="receive" />

methods: {
    receive(value) {
      console.log(value);//打印接收到子组件的值
    },
  },

3.vuex状态机

Vuex 是一个专为 Vue.js 应用程序开发的状态管理模式。它采用集中式存储管理应用的所有组件的状态,并以相应的规则保证状态以一种可预测的方式发生变化。

4.原型链

在main.js里面vue原型上挂一个对象,用来存需要传递的数据

Vue.prototype.$bus = {};

在页面中就可以进行读写了

this.$bus.parent="父组件数据";
let parent_data=this.$bus.parent;