vue單頁(yè)開發(fā)父子組件傳值思路詳解

更新時(shí)間：2018年05月18日 10:57:40 作者：小雷雷哥哥

這篇文章主要介紹了vue單頁(yè)開發(fā)父子組件傳值思路詳解,本文是小編抽空整理的思路，感興趣的朋友跟隨腳本之家小編一起學(xué)習(xí)吧

vue單頁(yè)開發(fā)時(shí)經(jīng)常需要父子組件之間傳值，自己用過(guò)但是不是很熟練，這里我抽空整理了一下思路，寫寫自己的總結(jié)。

GitHub地址：https://github.com/leileibrother/wechat-vue

文件目錄如下圖，example.vue是父組件，exampleChild.vue是子組件。

父組件引入子組件，父組件html的代碼如下：

<template> 
 <div> 
  <h3>這是父組件</h3> 
  <p style="margin: 20px 0;text-align: center;"> 
   <span>子組件傳過(guò)來(lái)的值是 “{{childValue}}”</span> 
  </p> 
  <example-child v-bind:message="parentMsg" @getChildValue="getValue"></example-child> 
 </div> 
</template> 
<script> 
 import exampleChild from './examplechild.vue'; 
 export default { 
  name: "example.vue", 
  components: { 
   exampleChild 
  }, 
  data(){ 
   return { 
    parentMsg:'hello', 
    childValue:'' 
   } 
  }, 
  mounted(){ 
  }, 
  methods: { 
   getValue:function (val) { 
    this.childValue = val; 
   } 
  } 
 } 
</script> 
<style scoped> 
</style>

子組件代碼如下：

<template> 
 <div> 
  <p style="margin: 20px 0;text-align: center;">我是子組件，父組件穿傳過(guò)來(lái)的值是{{message}}</p> 
  <p style="margin: 20px 0;text-align: center;"> 
   <button @click="send">點(diǎn)擊向父組件傳值</button> 
  </p> 
 </div> 
</template> 
<script> 
 export default { 
  name: "exampleChild.vue", 
  props:['message'], 
  data(){ 
   return { 
   } 
  }, 
  mounted(){ 
  }, 
  methods: { 
   send:function () { 
    this.$emit('getChildValue','你好父組件！') 
   } 
  } 
 } 
</script> 
<style scoped> 
</style>

1，父組件向子組件傳值。

在父組件中使用v-bind來(lái)綁定數(shù)據(jù)傳給子組件，如我寫的v-bind:message="parentMsg"，把message字段傳給子組件，