vue父组件主动调用子组件 /// 非父子组件传值

Posted 2020-12-30 dongzhuangdian

一  父组件主动调用子组件：

注意：在父组件使用子组件的标签上注入ref属性，例如：

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

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

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

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

    2.在父组件里面通过

        this.$refs.header.属性

        this.$refs.header.方法

 

二 非父子组件传值

注意：非父子组件传值，但两个组件必须被在一个页面中使用了。例如 home组件和news组件互相传值：

<template>

  <div id="app"> 
    
     <v-home></v-home>

    <br>

    <v-news></v-news>    
  </div>
</template>

（1）创建vue实例

import Vue from ‘vue‘;

var VueEvent = new Vue()

export default VueEvent;

（2）$emit $on

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