vue父子组件交互

重点：

父组件主动获取子组件的数据和方法：
                alert(this.$refs.header.msg);

                this.$refs.header.run();
子组件主动获取父组件的数据和方法：  
                this.$parent.数据

                this.$parent.方法

parent组件Home.vue

<template>
    <!-- 所有的内容要被根节点包含起来 -->
    <div id="home">
    
        <v-header ref="header"></v-header>

        <hr>
         首页组件   

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

    </div>

</template>


<script>


/*
父组件给子组件传值

    1.父组件调用子组件的时候 绑定动态属性
        <v-header :title="title"></v-header>

    2、在子组件里面通过 props接收父组件传过来的数据
        props:['title']



        props:{

            'title':String      
        }

    3.直接在子组件里面使用



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

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

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

    2.在父组件里面通过

        this.$refs.header.属性

        this.$refs.header.方法





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


        this.$parent.数据

        this.$parent.方法



*/

    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.vue

<template>


    <div>
    
        <h2>我是头部组件</h2>

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

       
    </div>
</template>




<script>
    
export default{


    data(){

        return{
            msg:'子组件的msg'
        }
    },
    methods:{
       
            run(){

                alert('我是子组件的run方法')
            },
            getParentData(){


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


                this.$parent.数据

                this.$parent.方法

                
                */
                // alert(this.$parent.msg);

                //this.$parent.run();
            }
    }
    
}

</script>

非父子组件传值

1、新建一个VueEvent.js文件   然后引入vue  实例化vue  最后暴露这个实例
 

import Vue from 'vue';
var VueEvent = new Vue()

export default VueEvent;

  2、在要广播的地方引入刚才定义的实例

//引入 vue实例


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

  3、通过 VueEmit.$emit('名称','数据')

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

  4、在接收收数据的地方通过 $om接收广播的数据
    VueEmit.$on('名称',function(){

    })

 VueEvent.$on('to-news',function(data){
                console.log(data);
            })

 。。。