稍微總結了一下Vue中父子間傳值以及相互調方法的問題，非常基礎、希望可以幫到你！先來個最常用的，直接上程式碼：

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>
　　　 <pclass="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>

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

①子元件中給一個方法去觸發$emit，第一個引數是在父元件引入子元件繫結的函式名('passVaule')，第二個是要傳的值(19)

②父元件中繫結一個函式，呼叫父元件中繫結的函式，在其中對值進行接收操作

3、子呼叫父元件中的方法

父元件：

<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('呼叫了父元件中的函式');
  }
 }
}
</script>

子元件：

<template>
 <div>
  <p class="child">子元件</p>
  <button @click="funClick">呼叫父元件方法</button>
 </div>
</template>

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

①這個跟子傳值給父類似，只是不傳值，呼叫了父元件的繫結的函式

4、父呼叫子元件中的方法

父元件：

<template>
 <div>
  <p class="father">父元件</p>
  <button @click="childClick">呼叫子元件方法</button>
  <child ref="mychild" ></child>
 </div>
</template>

<script>
import child from './child'
export default {
 components: {
  child
 },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('呼叫了子元件中的方法 11111',e)
  }
 }
}
</script>

① 父元件中在引入的子元件中寫入 ref = "mychild" mychid為自己定義的例項名

② 在函式中寫 this.refs.mychild.testNum()。 “testNum”為子元件中定義的函式名

③子元件定義一個函式，讓父元件呼叫即可，我定義的位testNum

④這個方法也可以進行傳值，在括號中寫入值，子元件接收即可 。

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

以上就是快速瞭解Vue父子元件傳值以及父調子方法、子調父方法的詳細內容，更多關於Vue父子元件傳值 的資料請關注我們其它相關文章！