版权声明:本文为博主原创文章,未经博主允许不得转载。 https://blog.csdn.net/zhaihaohao1/article/details/89021956
父组件主动获取子组件的数据和方法:
1.调用子组件的时候定义一个ref
<v-header ref="header"></v-header>
2.在父组件里面通过
this.$refs.header.属性
this.$refs.header.方法
子组件主动获取父组件的数据和方法:
this.$parent.数据
this.$parent.方法
下面写一个例子:
效果图:
项目结构:
App.vue是父组件
Home.vue是子组件
父组件:App.vue
<!--父组件给子组件传值-->
<template>
<div>
<IHome ref="home"></IHome>
<button @click="getSonMethod">父组件调用子组件的方法和属性</button>
</div>
</template>
<script>
/**
父组件主动获取子组件的数据和方法:
1.调用子组件的时候定义一个ref
<v-header ref="header"></v-header>
2.在父组件里面通过
this.$refs.header.属性
this.$refs.header.方法
子组件主动获取父组件的数据和方法:
this.$parent.数据
this.$parent.方法
*/
import IHome from './components/Home.vue';
export default {
name: 'app',
data() {
return {
title: '标题',
content:'内容',
}
},
methods:{
iFatherMethod(arge){
alert('父组件的iFatherMethod'+arge);
},
getSonMethod(){
//拿到子组件的变量
alert(this.$refs.home.msg);
//调用子组件的方法
this.$refs.home.isonmethod1();
}
},
components: {
/*前面的组件名称不能和html标签一样,会出现冲突*/
'IHome': IHome,
}
}
</script>
<style lang="scss" scoped>
.content {
font-size: 50px;
}
button {
width: 100%;
line-height: 150px;
text-align: center;
font-size: 50px;
}
</style>
子组件:Home.vue
<!--模板,里面写html-->
<template>
<!--根组件,只能有一个根组件-->
<div>
<!--显示父组件传过来的值-->
<div class="head">{{msg}}</div>
<button @click="isdiaomethod">子组件调用父组件的方法</button>
</div>
</template>
<!--script里面写逻辑-->
<script>
export default {
name: "IHeader",
data() {
return {
msg: '子组件的变量',
}
},
methods: {
isonmethod1(){
alert("子组件的isonmethod1方法");
},
isdiaomethod(){
this.$parent.iFatherMethod("111");
}
},
}
</script>
<!--style里面写样式-->
<style lang="scss" scoped>
/*scoped css只在本文件中起作用*/
.head {
width: 100%;
line-height: 150px;
text-align: center;
background-color: aqua;
font-size: 50px;
}
button {
width: 100%;
line-height: 150px;
text-align: center;
font-size: 50px;
}
</style>