快速了解Vue父子組件傳值以及父調(diào)子方法、子調(diào)父方法

更新時(shí)間：2020年07月15日 16:51:20 作者：小羽羽

這篇文章主要介紹了Vue父子組件傳值以及父調(diào)子方法、子調(diào)父方法，文中講解非常細(xì)致，代碼幫助大家更好的理解和學(xué)習(xí)，感興趣的朋友可以了解下

稍微總結(jié)了一下Vue中父子間傳值以及相互調(diào)方法的問題，非?；A(chǔ)、希望可以幫到你！先來個(gè)最常用的，直接上代碼：

1、父傳值給子組件

父組件：

<template>
 <div>
  <p class="father">父組件</p>
  <child :sid="id"></child>
 </div>
</template>

<script>
import child from './child'
export default {
 components: {
  child
 },
 data() {
  return {
   id:'0920', // 父組件向子組件傳的值
  }
 },
}
</script>

子組件：

<template>
 <div>
  <p class="child">子組件</p>
  <p class="child">接收父組件的值是：{{sid}}</p>
 </div>
</template>

<script>
export default {
 props:{
  sid:{
   type:String,
   default: '0'
  }
 },
 data() {
  return {
  }
 }
}
</script>

①在父組件中的操作如下：

②子組件中的操作如下：

2、子傳值給父組件

父組件：

<template>
 <div>
  <p class="father">父組件</p>
　　　 <p class="father">接收到子組件的值：{{childSia}}</p>
  <child @passVaule="passValue"></child>
 </div>
</template>

<script>
import child from './child'
export default {
 components: {
  child
 },
 data() {
  return {
   childSia:'', // 接收子組件的值
  }
 },
 methods: {
  passValue(data) {
   this.childSia = data;
  }
 }
}
</script>

子組件：

<template>
 <div>
  <p class="child">子組件</p>
  <button @click="valueClick">傳值</button>
 </div>
</template>

<script>
export default {
 data() {
  return {
  }
 },
 methods: {
  valueClick() {
   this.$emit('passVaule',19)
  }
 }
}
</script>

截圖說明太累了，我直覺總結(jié)我文字吧。

①子組件中給一個(gè)方法去觸發(fā)$emit，第一個(gè)參數(shù)是在父組件引入子組件綁定的函數(shù)名('passVaule')，第二個(gè)是要傳的值(19)

②父組件中綁定一個(gè)函數(shù)，調(diào)用父組件中綁定的函數(shù)，在其中對值進(jìn)行接收操作

3、子調(diào)用父組件中的方法

父組件：

<template>
 <div>
  <p class="father">父組件</p>
  <child @funVaule="funValue"></child>
 </div>
</template>

<script>
import child from './child'
export default {
 components: {
  child
 },
 data() {
  return {
  }
 },
 methods: {
  funValue() {
   console.log('調(diào)用了父組件中的函數(shù)');
  }
 }
}
</script>

子組件：

<template>
 <div>
  <p class="child">子組件</p>
  <button @click="funClick">調(diào)用父組件方法</button>
 </div>
</template>

<script>
export default {
 data() {
  return {
  }
 },
 methods: {
  funClick() {
   this.$emit('funVaule')
  }
 }
}
</script>

①這個(gè)跟子傳值給父類似，只是不傳值，調(diào)用了父組件的綁定的函數(shù)

4、父調(diào)用子組件中的方法

父組件：

<template>
 <div>
  <p class="father">父組件</p>
  <button @click="childClick">調(diào)用子組件方法</button>
  <child ref="mychild" ></child>
 </div>
</template>

<script>
import child from './child'
export default {
 components: {
  child
 },
 data() {
  return {
  }
 },
 methods: {
  childClick() {
   this.$refs.mychild.testNum(9809)
  }
 }
}
</script>

子組件：

<template>
 <div>
  <p class="child">子組件</p>
</button>
 </div>
</template>

<script>
export default {
 data() {
  return {
  }
 },
 methods: {
  testNum(e) {
   console.log('調(diào)用了子組件中的方法 11111',e)
  }
 }
}
</script>

① 父組件中在引入的子組件中寫入 ref = "mychild" mychid為自己定義的實(shí)例名

② 在函數(shù)中寫 this.refs.mychild.testNum()。 “testNum”為子組件中定義的函數(shù)名

③子組件定義一個(gè)函數(shù)，讓父組件調(diào)用即可，我定義的位testNum

④這個(gè)方法也可以進(jìn)行傳值，在括號(hào)中寫入值，子組件接收即可。

希望此文可以幫助到你哦。先去吃飯啦

以上就是快速了解Vue父子組件傳值以及父調(diào)子方法、子調(diào)父方法的詳細(xì)內(nèi)容，更多關(guān)于Vue父子組件傳值的資料請關(guān)注腳本之家其它相關(guān)文章！

您可能感興趣的文章: