基于VUE框架组件之间相互传值的整理

VUE中 父组件给子组件传值流程

1.创建父组件以及子组件；

2.在父组件中引入子组件；

3.在父组件中使用子组件；

4.在子组件标签上绑定指令，指定内容为需要传递的值；

5.在子组件内部使用props属性接收值，并绑定在子组件标签上；

 

VUE中 子组件给父组件传值流程

1.创建父组件以及子组件；

2.在父组件中引入子组件；

3.在父组件中使用子组件；

4.在子组件中使用：this.$emit("fromChildB", this.toMsg)，”fromChildB“为父组件中绑定的指令名，”this.toMsg“为需要传递的参数;

5.在父组件中子组件标签上绑定函数：@fromChildB="fromChildB"，”@fromChildB“为子组件中触发的第一个参数，”fromChildB“为接收的方法名；

6.在父组件methods钩子中：定义方法”fromChildB“，接收参数e,e为子组件传递的参数

VUE中 兄弟组件之间传值流程(中央事件总线BUS)

 

1.创建父组件以及子组件；

2.在父组件中引入子组件；

3.在父组件中使用子组件；

4.在父组件中创建中央事件总线BUS：Vue.prototype.bus = new Vue();

4.在子组件A中使用：this.bus.$emit('childAToChildB',this.toMsg);，”childAToChildB“为B组件中on指令的第一个参数，”this.toMsg“为需要传递的参数;

5.在组件B created钩子中：this.bus.$on("childAToChildB",this.childAToChildB);”childAToChildB“为A组件中触发的第一个参数，“this.childAToChildB”为指令触发后的回调函数；

6.在组件B methods钩子中：定义方法”childAToChildB“，接收参数e,e为A组件传递的参数；

 

 

具体代码实现

 

父组件：Father

 

<template>
  <div class="wrap">
    <div>
      <h2>父组件：Father</h2>
      <p>
        传给子组件A的值：
        <b style="color:#ff4747">{{sendA}}</b>
      </p>
      <p>
        收到子组件A的值：
        <b style="color:#ff4747">{{fromA}}</b>
      </p>
      <p>传给子组件B的值：<b style="color:#52aa44">{{sendB}}</b></p>
      <p>
        收到子组件B的值：
        <b style="color:#52aa44">{{fromB}}</b>
      </p>
    </div>

    <div>
      <childA :msg="sendA" @fromChildA="fromChildA"></childA>
    </div>

    <div>
      <childB :msg="sendB" @fromChildB="fromChildB"></childB>
    </div>
  </div>
</template>

<script>
// 引入子组件
import childA from "./childA.vue";
import childB from "./childB.vue";

//定义中央事件总线 
import Vue from 'vue';
Vue.prototype.bus = new Vue();

export default {
  name: "Father",
  components: {
    childA: childA,
    childB: childB
  },
  data() {
    return {
      sendA: "hello, world",
      sendB: "hello, china",
      fromA: "",
      fromB: ""
    };
  },
  methods: {
    fromChildA(e) {
      this.fromA = e;
    },
    fromChildB(e) {
      this.fromB = e;
    }
  }
};

</script>

<style type="text/css" scoped>
.wrap {
  padding: 20px;
}
.wrap > div {
  padding: 15px;
  margin: 15px;
  border: 1px solid #e2e2e2;
  border-radius: 5px;
}
.wrap > div > p {
  padding: 8px 0;
}
</style>

 

子组件：ChildA

 

<template>
  <div class="wrap">
    <h2>子组件：childA</h2>
    <p>接收到父组件的值：<b style="color:#ff4747">{{msg}}</b></p>

    <div>
      <p>点击给父组件传值：<b style="color:#ff4747">{{toMsg}}</b><span style="margin-left:10px;cursor:pointer;" @click="sendToFather()">发送</span></p>
      <p>点击给ChildB传值：<b style="color:blue">{{toMsg}}</b><span style="margin-left:10px;cursor:pointer;" @click="sendToChildB()">发送</span></p>
    </div>
  </div>
</template>

<script>
export default {
  name: "childA",
  props: ["msg"],
  data() {
    return {
      toMsg: "世界和平"
    };
  },
  methods: {
    sendToFather() {
      // 向父组件传值
      this.$emit('fromChildA',this.toMsg);
    },
    sendToChildB() {
      // 向兄弟组件传值
      this.bus.$emit('childAToChildB',this.toMsg);
    }
  }
};
</script>

<style type="text/css" scoped>
.wrap {
  padding: 0px!important;
}
.wrap > div {
  padding: 5px 0;
}
.wrap > div > p {
  padding: 2px 0;
}
</style>

子组件：ChildB

<template>
  <div class="wrap">
    <h2>子组件：childB</h2>
    <p>接收到父组件的值：<b style="color:#52aa44">{{msg}}</b></p>
    <p>接收到childA的值：<b style="color:blue">{{fromAmsg}}</b></p>

    <div>
      <p>点击给父组件传值：<b style="color:#ff4747">{{toMsg}}</b><span style="margin-left:10px;cursor:pointer;" @click="sendToFather()">发送</span></p>
    </div>
  </div>
</template>

<script>
export default {
  name: "childB",
  props: ["msg"],
  data() {
    return {
      toMsg: "永无战争",
      fromAmsg: "",
    };
  },
  methods: {
    sendToFather() {
      // 向父组件传值
      this.$emit("fromChildB", this.toMsg);
    },
    childAToChildB(e){
      // 接收传值后的回调
      this.fromAmsg = e;
    }
  },
  created(){
    // 接收兄弟组件的传值
    this.bus.$on("childAToChildB",this.childAToChildB);
  }
};
</script>

<style type="text/css" scoped>
.wrap {
  padding: 0px!important;
}
.wrap > div {
  padding: 5px 0;
}
.wrap > div > p {
  padding: 2px 0;
}
</style>