父组件主动获取子组件的数据和方法
1..调用子组件的时候 定义一个ref
<headerchild ref="headerChild"></headerchild>
2.在父组件里面通过
this.$refs.headerChild.属性
this.$refs.headerChild.方法
子组件主动获取父组件的数据和方法
在子组件里面通过
this.$parent.属性
this.$parent.方法
演示代码：
//父组件
<template>
<div id="header">
<headerchild ref="headerChild"></headerchild>
<button @click="getChild()">父组件获取子组件的数据和方法</button>
</div>
</template>
<script>
import HeaderChild from './HeaderChild'
export default {
data () {
return {
title:'我是父组件的数据'
}
},
methods: {
getChild (){
console.log(this.$refs.headerChild.name)
},
run (){
console.log("我是父组件里面的方法")
}
},
components: {
'headerchild': HeaderChild
}
}
</script>
<style lang="sass" scoped>
</style>
//子组件
<template>
<div id="headerchild">
<button @click="getParent()">获取父组件的数据和方法</button>
</div>
</template>
<script>
export default {
data () {
return {
name:'我是子组件里面的数据'
}
},
methods:{
getParent(){
console.log(this.$parent.title) /*获取整个父组件*/
this.$parent.run()/*获取父组件的方法*/
}
},
props:['title','run','home'] /*通过props接收父组件传递过来的数据 */
}
</script>
