一、父组件主动获取子组件的数据和方法
父组件主动获取子组件的数据和方法,需要在调用的时候给子组件添加ref属性,通过ref属性获取子组件的属性和方法;
1.调用子组件的时候顶一个ref
* <v-body ref='body'></v-body>
* 2.在父组件里调用
* this.$ref.body.属性
* this.$ref.body.方法
二、子组件主动获取父组件的数据和方法
子组件获取父组件的数据和方法可以直接调用this.$parent.方法名或者属性名`
this.$parent.msg1`
完整例子
home.vue
<template>
<div>
这是home组件
<v-body ref='body'></v-body>
<button @click="getchilddata()">获取子组件方法</button>
</div>
</template>
<script>
import Body from './Body.vue'
export default {
data(){
return{
msg1:'home组件的msg'
}
},components:{
'v-body':Body
},methods:{
getchilddata(){
//获取子组件的方法
this.$refs.body.run();
//获取子组件的属性
alert(this.$refs.body.msg);
}
}
}
</script>
<style lang="scss">
</style>
Body.vue
<template>
<div>
这是body组件
<button @click="getparent()">获取父组件的属性</button>
</div>
</template>
<script>
export default {
data(){
return{
msg:'这是子组件body的msg'
}
},methods:{
run(){
alert("这是子组件body的run方法")
},
getparent(){
alert(this.$parent.msg1)
}
}
}
</script>
<style lang="scss">
</style>