Vue小白教程：组件传值（二）

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

	1.调用子组件的时候定义一个ref
	    <v-header ref="header"></v-header>	    
	2.在父组件里面通过
	    this.$refs.header.属性
	    this.$refs.header.方法

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

   this.$parent.数据
   this.$parent.方法

父组件Home

<template>
    <div id="home">
        <v-header ref="header"></v-header><!--父组件中的子组件命名ref-->
   	    <hr>
        首页组件   
        <button @click="getChildData()">获取子组件的数据和方法</button>
    </div>
</template>

<script>
    import Header from './Header.vue';
    export default{
        data(){
            return {               
               msg:'我是一个home组件',
               title:'首页111'
            }
        },
        components:{
            'v-header':Header
        },
        methods:{
            run(){
                alert('我是Home组件的run方法');
            },
            getChildData(){
                //父组件主动获取子组件的数据和方法：
                alert(this.$refs.header.msg);
                this.$refs.header.run();
            }
        }
    }
</script>
<style lang="scss" scoped>
    /*css  局部作用域  scoped*/
    h2{
        color:red
    }   
</style>

子组件Header

<template>
   <div>   
        <h2>我是头部组件</h2>
         <button @click="getParentData()">获取子组件的数据和方法</button>
    </div>
</template>

<script>  
export default{
    data(){
        return{
            msg:'子组件的msg'
        }
    },
    methods:{
            run(){
                alert('我是子组件的run方法')
            },
            getParentData(){
                //子组件主动获取父组件的数据和方法：  
                alert(this.$parent.msg);
                this.$parent.run();
            }
    }    
}
</script>

注：教学内容出自视频教学IT营itying.com 大地老师Vue基础教程