vue组件传值

父传子

首先，在父组件的页面中引入子组件。

message为名字(随意取)，problemTitle为父组件里面的属性，即需要向子组件传的值。

父组件中代码：

<children :message="problemTitle"></children>

子组件代码：

props: ["message"]  

（不要写在data中）（message为在父组件中取得名字）

 

子传父

子组件需要向父组件抛发一个值

子组件代码：

this.$emit("showProblemDetail", this.qs)  （showProblemDetail为起的名字）

父组件代码：

<BeginToUse  v-on:showProblemDetail="getMsgFormSon"></BeginToUse> （showProblemDetail为在子组件中起的名字）

methods：｛

    getMsgFormSon (data) {

         data为子组件抛发的值

    },

｝

 

兄弟组件传值

兄弟组件传值通过bus，即vue实例

首先，需要建一个bus.js。

内部代码如下：

import Vue from "vue";

export default new Vue();

需要传值的组件代码如下：

Bus.$emit("txtStatus", "3");

  txtStatus为名字

接收传值的代码如下：

Bus.$on("txtStatus", function (val) {

    val即为传过来的值

});

  注意：bus指向vue实例，与当前组件的this指向不同！！！