1.父组件获取子组件的方法和数据
在父组件中的子组件添加 ref="childName",childName自定义
<childComponent ref="childName"></childComponent>
#获取子组件的方法 method:方法名
this.$refs.childName.method()
#获取子组件的数据 data:任意属性名,name,age....
this.$refs.childName.data
来吧,展示
父组件
<template>
<div>
<el-tabs v-model="activeName">
<!-- 组件化管理 -->
<el-tab-pane label="子组件管理" name="first">
<childComponent ref="ss"></childComponent>
</el-tab-pane>
</el-tabs>
</div>
</template>
<script>
import childComponent from './childComponent.vue';
export default {
components: { childComponent},
name: "AcademicManage",
data() {
return {
activeName: 'first',
}
},
methods:{
getSchoolChild(){
//调用子组件方法
this.$refs.ss.dll()
//调用子组件属性(数据)
this.$refs.ss.name
}
},
mounted(){
this.getSchoolChild()
}
}
</script>
子组件
<template>
<div></div>
</template>
<script>
import request from '@/utils/request';
export default {
name: "childComponent",
data() {
return {
name: '小李',
}
},
created(){
this.dll()
},
methods:{
dll(){
console.log("llllllll");
}
}
};
</script>
2.子组件获取父组件的方法和数据
this.$parent.属性
this.$parent.方法