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

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

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

vue單頁(yè)開(kāi)發(fā)時(shí)經(jīng)常需要父子組件之間傳值，自己用過(guò)但是不是很熟練，這里我抽空整理了一下思路，寫(xiě)寫(xiě)自己的總結(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ù)傳給子組件，如我寫(xiě)的v-bind:message="parentMsg"，把message字段傳給子組件，

在子組件中使用props接收值，如props:['message']，接收父組件傳過(guò)來(lái)的message字段，使用{{message}}就是可以使用父組件傳過(guò)來(lái)的值了。

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

子向父?jìng)髦敌枰粋€(gè)“中轉(zhuǎn)站”，如我寫(xiě)的getChildValue，命名隨便寫(xiě)。

在子組件中使用$emit()來(lái)向父組件傳值。第一個(gè)參數(shù)就是這個(gè)“中轉(zhuǎn)站”，后面的參數(shù)是要傳的值，可以是多個(gè)。

在父組件中如下，也需要這個(gè)中轉(zhuǎn)站來(lái)接收值

getValue是接收子組件值的函數(shù)，參數(shù)val就是子組件傳過(guò)來(lái)的值，這樣就可以接收到子組件傳過(guò)來(lái)的值了。

總結(jié)

以上所述是小編給大家介紹的vue單頁(yè)開(kāi)發(fā)父子組件傳值思路詳解，希望對(duì)大家有所幫助，如果大家有任何疑問(wèn)請(qǐng)給我留言，小編會(huì)及時(shí)回復(fù)大家的。在此也非常感謝大家對(duì)腳本之家網(wǎng)站的支持！

您可能感興趣的文章:

相關(guān)文章

vue中使用/deep/失效的解決方法
這篇文章主要介紹了vue中使用/deep/失效的解決辦法,使用了css預(yù)處理器，則可以使用/deep/，如果/deep/ 無(wú)效，則使用 ::v-deep，本文給大家講解的非常詳細(xì)需要的朋友可以參考下
2022-11-11
如何通過(guò)點(diǎn)擊按鈕切換顯示不同echarts圖表
這篇文章主要介紹了如何通過(guò)點(diǎn)擊按鈕切換顯示不同echarts圖表，具有很好的參考價(jià)值，希望對(duì)大家有所幫助。如有錯(cuò)誤或未考慮完全的地方，望不吝賜教
2022-10-10
關(guān)于Vite不能使用require問(wèn)題的解決方法
在vue2中我們通常會(huì)在模板中通過(guò)三目運(yùn)算符和require來(lái)實(shí)現(xiàn)動(dòng)態(tài)圖片,下面這篇文章主要給大家介紹了關(guān)于Vite不能使用require問(wèn)題的解決方法,需要的朋友可以參考下
2022-10-10
vue項(xiàng)目打包后提交到git上為什么沒(méi)有dist這個(gè)文件的解決方法
這篇文章主要介紹了vue項(xiàng)目打包后提交到git上為什么沒(méi)有dist這個(gè)文件的解決方法,本文給大家介紹的非常詳細(xì)，對(duì)大家的學(xué)習(xí)或工作具有一定的參考借鑒價(jià)值，需要的朋友可以參考下
2020-09-09
vue 折疊展示多行文本組件的實(shí)現(xiàn)代碼
這篇文章主要介紹了vue 折疊展示多行文本組件，自動(dòng)根據(jù)傳入的expand判斷是否需要折疊，非常完美，文章通過(guò)實(shí)例代碼給大家介紹的非常詳細(xì),需要的朋友可以參考下
2021-10-10
vue項(xiàng)目實(shí)現(xiàn)背景顏色以及下劃線從左到右漸變動(dòng)畫(huà)效果
這篇文章主要介紹了vue項(xiàng)目實(shí)現(xiàn)背景顏色以及下劃線從左到右漸變動(dòng)畫(huà)效果,具有很好的參考價(jià)值,希望對(duì)大家有所幫助,如有錯(cuò)誤或未考慮完全的地方,望不吝賜教
2024-08-08
Vue?和?Django?實(shí)現(xiàn)?Token?身份驗(yàn)證的流程
這篇文章主要介紹了Vue?和?Django?實(shí)現(xiàn)?Token?身份驗(yàn)證?,Vue.js?和?Django?編寫(xiě)的前后端項(xiàng)目中，實(shí)現(xiàn)了基于?Token?的身份驗(yàn)證機(jī)制，其他前后端框架的?Token?實(shí)現(xiàn)原理與本文一致，需要的朋友可以參考下
2022-08-08
詳解Vue 單文件組件的三種寫(xiě)法
這篇文章主要介紹了詳解Vue 單文件組件的三種寫(xiě)法，文中通過(guò)示例代碼介紹的非常詳細(xì)，對(duì)大家的學(xué)習(xí)或者工作具有一定的參考學(xué)習(xí)價(jià)值，需要的朋友們下面隨著小編來(lái)一起學(xué)習(xí)學(xué)習(xí)吧
2020-02-02
vue-auto-focus: 控制自動(dòng)聚焦行為的 vue 指令方法
今天小編就為大家分享一篇vue-auto-focus: 控制自動(dòng)聚焦行為的 vue 指令方法，具有很好的參考價(jià)值，希望對(duì)大家有所幫助。一起跟隨小編過(guò)來(lái)看看吧
2018-08-08
vuejs父子組件之間數(shù)據(jù)交互詳解
這篇文章主要為大家詳細(xì)介紹了vuejs父子組件之間的數(shù)據(jù)交互，具有一定的參考價(jià)值，感興趣的小伙伴們可以參考一下
2017-08-08