Vue之父子组件主动获取值

父组件主动获取子组件的值
Vue中父组件获取子组件的数据和方法主要通过ref，首页给子组件指定ref的值，比如ref="mHeader"，通过this.$refs.mHeader这句代码就能获取子组件，然后就能获取值，比如子组件title的值，就可以这样写this.$refs.mHeader.title。获取方法的写法为this.$refs.mHeader.方法名()。
子组件主动获取父组件的值
Vue中父组件获取子组件的数据和方法主要通过$parent，比如我要获取父组件的某个字段，写法为‘this.$parent.字段名，比如我要获取父组件的某个方法，写法为this.$parent.方法名()`

下面是父组件代码

<template>
  <div>
    <!-- 给子组件ref起名为mHeader-->
    <Header ref="mHeader"></Header>
    <h2>父组件</h2>
    <button @click="getHeaderMsg()">获取子组件的数据</button>
    <button @click="getHeaderFunction()">调用子组件的方法</button>
  </div>
</template>
<script>
import Header from "./Header.vue";
export default {
  data() {
    return {
      title: "我是Home的Header"
    };
  },
  methods: {
    homeRun() {
      alert("我是Home的alert");
    },

    getHeaderMsg() {
      // 通过refs获取子组件名称，然后通过名称获取子组件的headerMsg数据
      alert(this.$refs.mHeader.headerMsg);
    },
    getHeaderFunction() {
       // 通过refs获取子组件名称，然后通过名称获取子组件的headerRun方法
      this.$refs.mHeader.headerRun();
    },
  },
  components: {
    Header
  },
  props: {}
};
</script>

下面是子组件的代码

<template>
  <div>
    <!-- title用来显示父组件传过来的值 -->
    <h3>{{title}}</h3>
   
    <button @click="getParentMsg()">获取父组件的数据</button>
    <button @click="getParentFun()">获取父组件的数据</button>
  </div>
</template>
<script>
export default {
  data() {
    return {
      headerMsg: "我是子组件的数据"
    };
  },
  methods: {
    headerRun() {
      alert("我是子组件的run方法");
    },
    getParentMsg() {
      // 通过$parent获取父组件，然后获取父组件的title数据
      alert(this.$parent.title);
    },

    getParentFun() {
       // 通过$parent获取父组件，然后获取父组件的homeRun数据
      this.$parent.homeRun();
    }
  },
 
};
</script>