VUE组件传参

一、父组件给子组件传参方法

/**
    父组件
*/
<Detail v-if="isShowDetail" :detailData_props="detailData"/>

import Detail from "./detail";

export default {
  name: "statisticsIndex",
  data() {
    return {
      detailData: "给子组件传的值"
    };
  },
  components: {
    Detail
  }
}

/**
    子组件
*/
export default {
  name: "statisticsDetail",
  data() {
    return {
      // detailData_props: ""
    };
  },
  props: ["detailData_props"], // 传过来的参数
  created() {
    console.log(this. detailData_props)
    // 这里不能修改detailData，修改会报错
  },
  methods: {},
  components: {}
};

二、子组件调用父组件方法

/**
    父组件
*/
<Detail v-if="isShowDetail" @next="nextStep" />

import Detail from "./detail";

export default {
  name: "statisticsIndex",
  data() {
    return { };
  },
  methods:{
    //  子组件会触发此方法，event为子组件传过来的参数
    nextStep(event) {
      console.log(event);
    }
  }
  components: {
    Detail
  }
}

/**
    子组件
*/
export default {
  name: "statisticsDetail",
  data() {
    return {};
  },
  created() {},
  methods: {
    goBack() {
      // 子组件调用父组件的方法，将值传给父组件，false为参数
      this.$emit("next", false);
    }
   },
  components: {}
};

三、不同组件相互触发方法

/**
    在main.js中添加 $eventBus方法
*/
Vue.prototype.$eventBus = new Vue();

/**
    监听其他组件，给此组件传参
*/
export default {
  name: "statisticsDetail",
  data() {
    return {};
  },
  created() {},
  mounted() {
    // 相当于监听 add 方法，其他组件可触发
    this.$eventBus.$on("add", e => {
      // 触发后，进行操作，e为参数
    });
  },
  methods: { },
  components: {}
};

/**
    给其他组件传参
*/
export default {
  name: "statisticsDetail",
  data() {
    return {};
  },
  created() {},
  methods: {
    click() {
        //   触发add方法，false为传给其他组件的参数
        this.$eventBus.$emit("add", false);
    },
  }
};