vue父组件获取子组件的数据和方法

一、父组件主动获取子组件的数据和方法

1.调用子组件的时候 定义一个ref

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

2.在父组件里面通过

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

二、子组件主动获取父组件的数据和方法

在子组件里面通过

this.$parent.属性
this.$parent.方法

三、演示代码

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



//子组件
<template>
  <div id="headerchild">
      <button @click="getParent()">获取父组件的数据和方法</button>
  </div>
</template>
<script>
export default {
  props:['title','run','home'], /*通过props接收父组件传递过来的数据 */
  data () {
      return {
          name:'我是子组件里面的数据'
      }
  },
  methods:{
      getParent(){
          console.log(this.$parent.title) /*获取整个父组件*/
          this.$parent.run()/*获取父组件的方法*/
      }
  }
}
</script>

摘自：https://www.jianshu.com/p/b6c553b89f26