14、父子组件传值的另一种方法

父组件获取子组件：

image.png

1、加'ref'

image.png

2、利用this.$refs.header.msg直接调用，获取子组件数据

image.png

子组件获取父组件：
直接用this.$parent.msg获取

image.png

Home.vue(父):

<template>

<div>
<v-header ref="header"></v-header>
{{msg}}
<button @click="getChildData()">获取子组件的数据和方法</button>
</div>
</template>

<script>
import Header from './Header.vue'//哪里用，就在那里引用（比如，Home.vue这个组件里要用，则在此处引入）
export default {
name: "home",
data(){
return {
msg:'我是一个首页',
title:123,
}
},
methods:{
run(){
alert('我是父组件方法');
},
getChildData(){
alert(this.$refs.header.msg);//获取子组件数据的方法
}
},
components:{
'v-header':Header,
}
}
</script>

<style scoped lang="scss">
h2{
color:red;
}
</style>

Header.vue（子）:

<template>
<div>
<h2>我是一个头部组件</h2>
<button @click="getParentData()">点击获取父组件数据和方法</button>
</div>
</template>

<script>
export default {
name: "header",
data(){
return {
msg:'子组件的数据',
}
},
methods:{
getParentData(){
alert(this.parent.run();
}
},
}

</script>

<style scoped>

</style>