<div id="home">

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

<hr>

首页组件

<button @click="getChildData()">获取子组件的数据和方法</button>

</div>

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

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

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

    .在父组件里面通过

        this.$refs.header.属性

        this.$refs.header.方法

<template>

  <div id="app"> 

     <v-home></v-home>

    <br>

    <v-news></v-news>

  </div>

</template>

import Vue from 'vue';

var VueEvent = new Vue()

export default VueEvent;

<template>

    <div id="news">

       我是新闻组件

        <br>

       <button @click="emitHome()">给Home组件广播数据</button>

        <br>

    </div>

</template>

<script>

//引入 vue实例

    import VueEvent from '../model/VueEvent.js';

    export default{

        data(){

            return {

               msg:'我是一个新闻组件'

            }

        },

        methods:{

            emitHome(){

                //广播

                VueEvent.$emit('to-home',this.msg)

            }

        },

        mounted(){

            VueEvent.$on('to-news',function(data){

                console.log(data);

            })

        }

    }

</script>

<template>

    <!-- 所有的内容要被根节点包含起来 -->

    <div id="home">

       我是首页组件

       <br>

       <button @click="emitNews()">给News组件广播数据</button>

        <br>

    </div>

</template>

<script>

//引入 vue实例

    import VueEvent from '../model/VueEvent.js';

    export default{

        data(){

            return {

               msg:'我是一个home组件',

               title:'首页111'

            }

        },methods:{

            emitNews(){

                //广播数据

                VueEvent.$emit('to-news',this.msg)

            }

        },

        mounted(){

            //监听news 广播的数据

            VueEvent.$on('to-home',function(data){

                console.log(data);

            })

        }

    }

</script>

<style lang="scss" scoped>

</style>