父传子

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

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指向不同!!!

Logo

前往低代码交流专区

更多推荐