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

子组件执行父组件的方法： this.$parent.父组件方法
子组件获取父组件的数据： this.$parent.父组件的数据

父组件获取子组件的方法：this.$refs.ones.方法 父组件获取子组件的数据：this.$refs.ones.子组件的数据

one.vue

<template>
  <div class="one">
    <h1>{{ msg1 }}</h1>
    <hr />
    <button @click="run">按钮1</button>
    <br />
    <button @click="getParentdata">获取父组件的数据</button>
  </div>
</template>

<script>
export default {
  name: "one",
  props: ["msg1"],
  data() {
    return {
      msga: "我是one的信息00001"
    };
  },
  methods: {
    run() {
      alert("我是子组件one的方法");// 父组件执行子组件的方法
    },
    getParentdata() {
      alert(this.$parent.parentMsg);// 2. 获取父组件的数据
    },
    getParentobj() {
      this.$parent.box();// 1. 执行父组件的方法
    }
  }

};
</script>

<style scoped>
</style>

home.vue

<template>
  <div class="home">
    <one ref="ones" :msg1="msg1" />
    <hr />
    <button @click="btns1()">home按钮msg1</button>
    <button @click="btns2()">home按钮msg1</button>
  </div>
</template>

<script>
import one from "@/components/one.vue";

export default {
  name: "home",
  data() {
    return {
      msg1: "我是one的msg1",
      parentMsg: "我是父组件的信息 parentMsg"
    };
  },
  components: {
    one,
    two
  },
  methods: {
    box() {
      alert("我是父组件的方法 需要被子组件点击执行");
    },
    // 1. 获取 子组件的数据
    btns1() {
      alert(this.$refs.ones.msg1); // 我是one的msg1
    },
    btns2() {
      alert(this.$refs.ones.msga);// 我是one的信息00001   
    },

    // 2. 执行子组件的方法
    btns3() {
      this.$refs.ones.run();//父组件执行子组件的方法
    }

  }
};

</script>
<style >
</style>