基于Vue中的父子傳值問題解決

更新時(shí)間：2020年07月27日 11:04:34 作者：WebCandy

這篇文章主要介紹了基于Vue中的父子傳值問題解決，具有很好的參考價(jià)值，希望對大家有所幫助。一起跟隨小編過來看看吧

主題是Vue中幾種常見的傳值方法。。。先寫個(gè)父子傳值吧

vue-cli構(gòu)建項(xiàng)目目錄，嚕啦啦，這個(gè)就不用說了吧。

接著創(chuàng)建父子組件，父組件Father.vue，子組件Son.vue(隨意起名，開心就好)，然后在父組件中引入子組件，創(chuàng)建一個(gè)父組件的路由。車門已經(jīng)焊死了，請繼續(xù)往下看

1.父傳子

Father.vue(用v-bind(簡寫 : ) 將父組件傳的值綁定到子組件上)

<template>
 <div>
  我是爸爸：{{message}}
  <hr>
  <Son :toSonData="toSonData"></Son>
 </div>
</template>
 
<script>
import Son from "./Son.vue";
export default {
 data() {
 return {
  message : "兒子你好",
  toSonData: "大嘴巴子"http://給子組件的值
 };
 },
 
 components: {
 Son
 }
};
</script>
<style lang='scss' scoped>
</style>

Son.vue（在子組件中用props方法接收父組件傳來的值，兩種方法，具體用哪種看個(gè)人喜好，推薦第二種）

<template>
 <div>
 我是兒子：{{message}}
 <br>
 爸爸給我的禮物：{{toSonData}}
 </div>
</template>
 
<script>
export default {
 // props:["toSonData"],//第一種方式
 props:{//第二種方式
 toSonData:{
  type:String,
  default:function(){
  return ""
  }
 }
 },
 data () {
 return {
  message : "爸爸你好"
 };
 },
}
 
</script>
<style lang='scss' scoped>
</style>

效果圖：

2.子傳父

Son.vue(在子組件中創(chuàng)建一個(gè)按鈕，定義一個(gè)點(diǎn)擊事件，點(diǎn)擊事件里用this.$emit方法觸發(fā)一個(gè)自定義事件，并傳遞一個(gè)參數(shù))

<template>
 <div>
 我是兒子：{{message}}
 <br>
 爸爸給我的禮物：{{toSonData}}
 <br>
 <button @click="toFatherData">給爸爸傳值</button>
 </div>
</template>
 
<script>
export default {
 // props:["toSonData"],//第一種方式
 props:{//第二種方式
 toSonData:{
  type:String,
  default:function(){
  return ""
  }
 }
 },
 data () {
 return {
  message : "爸爸你好"
 };
 },
 methods:{
 toFatherData(){
  this.$emit("toFatherData","給爸爸的愛")
 }
 }
}
 
</script>
<style lang='scss' scoped>
</style>

Father.vue(在父組件中的子標(biāo)簽中監(jiān)聽該自定義事件并添加一個(gè)響應(yīng)該事件的處理方法，將接收到的值賦給data中的sendSonMessage)

<template>
 <div>
  我是爸爸：{{message}}
  <br>
  兒子傳來的值:{{sendSonMessage}}
  <hr>
  <Son :toSonData="toSonData" @toFatherData="sendSonData"></Son>
 </div>
</template>
 
<script>
import Son from "./Son.vue";
export default {
 data() {
 return {
  message : "兒子你好",
  toSonData: "大嘴巴子",//給子組件的值
  sendSonMessage: ""
 };
 },
 
 components: {
 Son
 },
 methods:{
 sendSonData(data){
  this.sendSonMessage=data;
 }
 }
};
</script>
<style lang='scss' scoped>
</style>

效果圖：