父元件主動獲取子元件的資料和方法

1.呼叫子元件的時候 定義一個ref

<headerchild ref="headerChild"></headerchild>

2.在父元件裡面通過

this.$refs.headerChild.屬性
this.$refs.headerChild.方法

子元件主動獲取父元件的資料和方法

在子元件裡面通過

this.$parent.屬性
this.$parent.方法

演示程式碼：

//父元件 --- header.vue
<template>
  <div id="header"
 
>  
    <child-template ref="childTemplate"></child-template>    //注意：ref 的 childTemplate 是隨便定義的，與下面的 this.$refs.childTemplate 保持一致
    <button @click="getChild()">父元件獲取子元件的資料和方法</button>
  </div>
</template>
<script>
import Child from './child'    // import 子元件的 child.vue
 

export default {
  data () {
      return {
          title:'我是父元件的資料'
      }
  },
  methods: {
     getChild (){
         console.log(this.$refs.childTemplate.name)        //this.$refs.childTemplate 獲取自逐漸
     },
     run (){
         console.log("我是父元件裡面的方法")
     }
  },
  components: {
      'child-template
 
': Child   //和 import 的 對應
  }
}
</script>

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