子组件主动获取父组件的数据和方法
实现方式:
this.$parent.属性
this.$parent.方法
代码示例:
父组件
<template>
<div>
<!-- 所有内容都要被根节点包含 -->
<v-header ref='header' :title="title"></v-header>
<br>
<h2>这是一个首页组件</h2>
<hr>
</div>
</template>
<script>
import Header from './Header'
export default {
components:{
'v-header':Header
},
data(){
return{
msg:'Yes, a first Page!',
title:'我是的数据NO.1'
}
},
methods:{
run(){
alert('我ishi父组件的方法!!!!')
}
}
</script>
<style lang="scss" scoped>
h2{
color: red;
}
</style>
子组件:
<template>
<div>
<h1>这是头部组件--{{title}}</h1>
<button @click="getParent()">子组件主动获取父组件的数据和方法</button>
</div>
</template>
<script>
/*
子组件主动获取父组件的数据和方法
this.$parent.属性
this.$parent.方法
*/
export default {
data(){
return{
aaa:'m,sh'
}
},
methods:{
getParent(){
alert( this.$parent.title)
this.$parent.run()
}
},
props:['title']
}
</script>
<style lang="scss" scoped>
h1{
color: skyblue;
}
</style>
到此常见的父子组件通信大概就是这些,欢迎有更好想法或建议的道友留言!!!