Vue父子组件通信之父组件主动获取子组件的数据和方法（二）

父组件主动获取子组件的数据和方法：

操作步骤：

1：调用子组件的时候定义一个ref

<v-header ref='header' ></v-header>

2:在父组件中通过

this.$refs.header.属性

this.$refs.header.方法

代码实例

父组件
<template>
    <div>
        <!-- 所有内容都要被根节点包含 -->
        <v-header ref='header' :title="title"></v-header>
        <br>
        <button @click="getChild()">获取子组件的属性</button>
        <br><br>
        <button @click="getChild1()">获取子组件的方法</button>
        <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:{
        getChild(){
            alert(this.$refs.header.aaa)
        },
        getChild1(){
            this.$refs.header.run();
        }
    }
}
</script>
<style lang="scss" scoped>
h2{
    color: red;
}
</style>

子组件
<template>
    <div>
        <h1>这是头部组件--{{title}}</h1>
        
    </div>
</template>
<script>
export default {
    data(){
       return{
            aaa:'m,sh'
       }
    },
     methods:{
       run(){
           alert('我ishi子组件的方法！！！！')
       }
     },
     props:['title']
  
}
</script>

<style lang="scss" scoped>
h1{
    color: skyblue;
}
</style>

这是vue父子组件通信的第二部分，下 一部分总结子组件主动获取父组件的属性和方法