父组件获取子组件:
1、加'ref'
2、利用this.$refs.header.msg直接调用,获取子组件数据
子组件获取父组件:
直接用this.$parent.msg获取
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>