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

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

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

2.在父组件里面通过

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

在子组件里面通过

演示代码：

//父组件<template> <divid="header">

    <headerchildref="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><stylelang="sass"scoped></style>//子组件<template>  <divid="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>