子组件执行父组件的方法: this.$parent.父组件方法
子组件获取父组件的数据: this.$parent.父组件的数据
<one ref="ones" :msg1="msg1" />
父组件获取子组件的方法: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>
```