Vue父組件和子組件之間數據傳遞和方法怎么調用

本篇內容主要講解“Vue父組件和子組件之間數據傳遞和方法怎么調用”，感興趣的朋友不妨來看看。本文介紹的方法操作簡單快捷，實用性強。下面就讓小編來帶大家學習“Vue父組件和子組件之間數據傳遞和方法怎么調用”吧!

vue組件在通信中，無論是子組件向父組件傳值還是父組件向子組件傳值，他們都有一個共同點就是有中間介質，子向父的介質是自定義事件，父向子的介質是props中的屬性。

父組件向子組件傳值(子組件主動獲取父組件的數據和方法)

父組件import引用子組件
使用子組件時在子組件上添加一個v-bind屬性，并綁定上數據
在子組件中創建 props ，在props 中創建相同的屬性名，用來接收數據
把接收到的數據在子組件中使用

子組件向父組件傳值(父組件主動獲取子組件的數據和方法)

子組件中需要發出該自定義事件，可以是按鈕的點擊事件，也可以是其他方式
將需要傳的值放在 $emit 第二個參數的位置，這個參數會被傳給父組件中的響應方法
需要在父組件中使用子組件并在子組件標簽上綁定對事件的監聽

演示代碼：

//父組件
<template>
  <div id="header">  
    <headerchild ref="headerChild"></headerchild>
    <button @click="getChild()">父組件獲取子組件的數據和方法</button>
  </div>
</template>
<script>
import HeaderChild from './HeaderChild'
export default {
  data () {
      return {
          title:'我是父組件的數據'
      }
  },
  methods: {
     getChild (){
         console.log(this.$refs.headerChild.name)
     },
     run (){
         console.log("我是父組件里面的方法")
     }
  },
  components: {
      'headerchild': HeaderChild
  }
}
</script>
<style lang="sass" scoped>

</style>

//子組件
<template>
  <div id="headerchild">
      <button @click="getParent()">獲取父組件的數據和方法</button>
  </div>
</template>
<script>
export default {
  data () {
      return {
          name:'我是子組件里面的數據'
      }
  },
  methods:{
      getParent(){
          console.log(this.$parent.title) /*獲取整個父組件*/
          this.$parent.run()/*獲取父組件的方法*/
      }
  },
  props:['title','run','home'] /*通過props接收父組件傳遞過來的數據 */
}
</script>

到此，相信大家對“Vue父組件和子組件之間數據傳遞和方法怎么調用”有了更深的了解，不妨來實際操作一番吧！這里是億速云網站，更多相關內容可以進入相關頻道進行查詢，關注我們，繼續學習！