父组件主动获取子组件的数据和方法
父组件主动获取子组件的数据和方法
1..调用子组件的时候 定义一个ref
2.在父组件里面通过
子组件主动获取父组件的数据和方法
在子组件里面通过
演示代码：
//父组件<template> <divid="header">
<headerchildref="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><stylelang="sass"scoped></style>//子组件<template> <divid="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>
