vue父子組件傳值的原理是什么，相信很多沒有經(jīng)驗(yàn)的人對此束手無策，為此本文總結(jié)了問題出現(xiàn)的原因和解決方法，通過這篇文章希望你能解決這個問題。

讓客戶滿意是我們工作的目標(biāo)，不斷超越客戶的期望值來自于我們對這個行業(yè)的熱愛。我們立志把好的技術(shù)通過有效、簡單的方式提供給客戶，將通過不懈努力成為客戶在信息化領(lǐng)域值得信任、有價值的長期合作伙伴，公司提供的服務(wù)項(xiàng)目有：域名申請、網(wǎng)頁空間、營銷軟件、網(wǎng)站建設(shè)、鼓樓網(wǎng)站維護(hù)、網(wǎng)站推廣。

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

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

<template> 
 <div> 
  <h4>這是父組件</h4> 
  <p > 
   <span>子組件傳過來的值是 “{{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 >我是子組件，父組件穿傳過來的值是{{message}}</p> 
  <p > 
   <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來綁定數(shù)據(jù)傳給子組件，如我寫的v-bind:message="parentMsg"，把message字段傳給子組件，

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

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

子向父傳值需要一個“中轉(zhuǎn)站”，如我寫的getChildValue，命名隨便寫。

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

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

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

看完上述內(nèi)容，你們掌握vue父子組件傳值的原理是什么的方法了嗎？如果還想學(xué)到更多技能或想了解更多相關(guān)內(nèi)容，歡迎關(guān)注創(chuàng)新互聯(lián)行業(yè)資訊頻道，感謝各位的閱讀！

名稱欄目：vue父子組件傳值的原理是什么-創(chuàng)新互聯(lián)
URL網(wǎng)址：http://www.rwnh.cn/article34/csiope.html

成都網(wǎng)站建設(shè)公司_創(chuàng)新互聯(lián)，為您提供Google、網(wǎng)站收錄、網(wǎng)站導(dǎo)航、域名注冊、響應(yīng)式網(wǎng)站、網(wǎng)站內(nèi)鏈

廣告

聲明：本網(wǎng)站發(fā)布的內(nèi)容（圖片、視頻和文字）以用戶投稿、用戶轉(zhuǎn)載內(nèi)容為主，如果涉及侵權(quán)請盡快告知，我們將會在第一時間刪除。文章觀點(diǎn)不代表本網(wǎng)站立場，如需處理請聯(lián)系客服。電話：028-86922220；郵箱：631063699@qq.com。內(nèi)容未經(jīng)允許不得轉(zhuǎn)載，或轉(zhuǎn)載時需注明來源： 創(chuàng)新互聯(lián)