vue組件傳值的實現(xiàn)方式小結(jié)【三種方式】

更新時間：2020年02月05日 09:07:45 作者：不想寫代碼的碼農(nóng)

這篇文章主要介紹了vue組件傳值的實現(xiàn)方式,結(jié)合實例形式總結(jié)分析了vue.js組建傳值的三種實現(xiàn)方式,包括父傳子、子傳父及非父子傳值,需要的朋友可以參考下

本文實例講述了vue組件傳值的實現(xiàn)方式。分享給大家供大家參考，具體如下：

前言

vue的組件傳值分為三種方式：父傳子、子傳父、非父子組件傳值

引用官網(wǎng)的一句話：父子組件的關(guān)系可以總結(jié)為 prop 向下傳遞，事件向上傳遞

父組件通過 prop 給子組件下發(fā)數(shù)據(jù)，子組件通過事件給父組件發(fā)送消息，如下圖所示：

下面我們就開始用代碼（一言不合就上代碼）詳細的介紹vue組件傳值的三種方式

1、父傳子

子組件的代碼：

<template>
  <div id="container">
    {{msg}}
  </div>
</template>
<script>
export default {
 data() {
  return {};
 },
 props:{
  msg: String
 }
};
</script>
<style scoped>
#container{
  color: red;
  margin-top: 50px;
}
</style>

父組件的代碼：

<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>
<style scoped>
</style>

父傳子的實現(xiàn)方式就是通過props屬性，子組件通過props屬性接收從父組件傳過來的值，而父組件傳值的時候使用 v-bind 將子組件中預留的變量名綁定為data里面的數(shù)據(jù)即可

2、子傳父

子組件代碼：

<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("getData", this.msg);
  }
 }
};
</script>
<style scoped>
#container {
 color: red;
 margin-top: 50px;
}
</style>

父組件代碼：

<template>
  <div id="container">
    <Child @getData="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>
<style scoped>
</style>

子傳父的實現(xiàn)方式就是用了 this.$emit 來遍歷 getData 事件，首先用按鈕來觸發(fā) setData 事件，在 setData 中用 this.$emit 來遍歷 getData 事件，最后返回 this.msg

總結(jié)：