父组件主动获取子组件的值
Vue中父组件获取子组件的数据和方法主要通过ref,首页给子组件指定ref的值,比如ref="mHeader"
,通过this.$refs.mHeader
这句代码就能获取子组件,然后就能获取值,比如子组件title的值,就可以这样写this.$refs.mHeader.title
。获取方法的写法为this.$refs.mHeader.方法名()
。
子组件主动获取父组件的值
Vue中父组件获取子组件的数据和方法主要通过
p
a
r
e
n
t
,
比
如
我
要
获
取
父
组
件
的
某
个
字
段
,
写
法
为
‘
t
h
i
s
.
parent,比如我要获取父组件的某个字段,写法为`this.
parent,比如我要获取父组件的某个字段,写法为‘this.parent.字段名,比如我要获取父组件的某个方法,写法为
this.$parent.方法名()`
下面是父组件代码
<template>
<div>
<!-- 给子组件ref起名为mHeader-->
<Header ref="mHeader"></Header>
<h2>父组件</h2>
<button @click="getHeaderMsg()">获取子组件的数据</button>
<button @click="getHeaderFunction()">调用子组件的方法</button>
</div>
</template>
<script>
import Header from "./Header.vue";
export default {
data() {
return {
title: "我是Home的Header"
};
},
methods: {
homeRun() {
alert("我是Home的alert");
},
getHeaderMsg() {
// 通过refs获取子组件名称,然后通过名称获取子组件的headerMsg数据
alert(this.$refs.mHeader.headerMsg);
},
getHeaderFunction() {
// 通过refs获取子组件名称,然后通过名称获取子组件的headerRun方法
this.$refs.mHeader.headerRun();
},
},
components: {
Header
},
props: {}
};
</script>
下面是子组件的代码
<template>
<div>
<!-- title用来显示父组件传过来的值 -->
<h3>{{title}}</h3>
<button @click="getParentMsg()">获取父组件的数据</button>
<button @click="getParentFun()">获取父组件的数据</button>
</div>
</template>
<script>
export default {
data() {
return {
headerMsg: "我是子组件的数据"
};
},
methods: {
headerRun() {
alert("我是子组件的run方法");
},
getParentMsg() {
// 通过$parent获取父组件,然后获取父组件的title数据
alert(this.$parent.title);
},
getParentFun() {
// 通过$parent获取父组件,然后获取父组件的homeRun数据
this.$parent.homeRun();
}
},
};
</script>