vue组件传值

vue的组件传值分为三种方式

• 父传子
• 子传父
• 非父子组件传值

父传子

父组件通过 prop 给子组件下发数据

父传子的实现方式就是通过props属性，子组件通过props属性接收从父组件传过来的值，而父组件传值的时候使用 v-bind 将子组件中预留的变量名绑定为data里面的数据即可

子组件

<template>
    <div id="container">
        {{msg}}
    </div>
</template>
<script>
export default {
  data() {
    return {};
  },
  props:{ //接收信息
    msg: String
  }
};
</script>

父组件

<template>
    <div id="container">
        <input type="text" v-model="text" @change="dataChange">
        <Child :msg="text"></Child>
    </div>
</template>
<script>
import Child from "@/components/Child";
export default {
  data() {
    return {
      text: "父组件的值"
    };
  },
  methods: {
    dataChange(data){ //变量名赋值，传送
        this.msg = data
    }
  },
  components: {
    Child
  }
};
</script>

注：

• 可以在子组件中加上ref即可通过this.$refs.方法名调用子组件的方法
• 也可以使用$children获取子组件中的值

子传父

子组件通过事件给父组件发送消息

子传父的实现方式就是用了 this.$emit 来遍历 getData 事件，首先用按钮来触发 setData 事件，在 setData 中 用 this.$emit 来遍历 getData 事件，最后返回 this.msg

子组件

<template>
    <div id="container">
        <input type="text" v-model="msg">
        <button @click="setData">传递到父组件</button>
    </div>
</template>
<script>
export default {
  data() {
    return {
      msg: "传递给父组件的值"
    };
  },
  methods: {
    setData() {
      this.$emit("getDat", this.msg);
    }
  }
};
</script>
<style scoped>
#container {
  color: red;
  margin-top: 50px;
}
</style>

父组件

<template>
    <div id="container">
        <Child @getDat="getData"></Child>
        <p>{{msg}}</p>
    </div>
</template>
<script>
import Child from "@/components/Child";
export default {
  data() {
    return {
      msg: "父组件默认值"
    };
  },
  methods: {
    getData(data) {
      this.msg = data;
    }
  },
  components: {
    Child
  }
};
</script>

注：

• 也通过$parent

非父子组件

非父子组件间传值建议使用vuex

特殊情况可以使用事件总线的方法

初始化，全局创建$bus

 main.js 初始化 $bus :

// main.js
window.$bus=new Vue();
//初始化一个 全局的事件总线

发送事件
$bus.$emit("aMsg", '来自A页面的消息');

<!-- A.vue -->
<template>
   <button @click="sendMsg()">-</button>
</template>

<script> 
//import $bus from "../bus.js";
export default {
 methods: {
   sendMsg() {
     $bus.$emit("aMsg", '来自A页面的消息');
   }
 }
}; 
</script>

接收事件
$bus.$on("事件名",callback)

<!-- IncrementCount.vue -->
<template>
 <p>{{msg}}</p>
</template>

<script> 
//import $bus  from "../bus.js";
export default {
 data(){
   return {
     msg: ''
   }
 },
 mounted() {
   $bus.$on("aMsg", (msg) => {
     // A发送来的消息
     this.msg = msg;
   });
 }
};
</script>