Vue学习之非父子组件的传值

迈不过友情╰ 2022-03-17 01:13 225阅读 0赞

Vue中非父子组件的传值在这里我给出四步，步骤如下：

#### 1.新建一个js文件—>然后引入vue—>实例化vue—>暴露这个实例 ####

**VueEvent.js**

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

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

#### 3.通过 VueEvent.$emit(‘名称’,数据) 此方法来广播 ####

**Home.vue**

<template>
        
        <div id="home">
            我是首页组件
    
            <br>
            
            <button @click="emitNews()">给news组件广播数据</button>
    
        </div>
    </template>  
    
    <script>
    //引入 vue实例
    import VueEvent from '../model/VueEvent.js'
    export default { 
        data(){ 
            return { 
                msg:'我是一个home组件',
                title:'今天 2019/2/21'
            }
        },
        methods:{ 
            emitNews(){ 
                // 广播数据
    
                VueEvent.$emit('to-news',this.msg)
            }
        },
        mounted(){ 
            //监听news广播的数据
            VueEvent.$on('to-home',function(data){ 
                console.log(data);
            })
        }
        
    }
    </script>

#### 4.在接收数据的地方通过 $on 接收广播的数据 ####

**VueEvent.$on(‘名称’,function()\{  
\})**

**News.vue**

<template>
     
     <div id="news">
         我是一个新闻组件
         <br>
         <button @click="emitHome()">给home组件广播数据</button>
    
     </div>
    </template>
    
    <script>
    //引入 vue实例
    import VueEvent from '../model/VueEvent.js'
    
    export default { 
     data(){ 
         return { 
             msg:'我是一个news组件',
         }
     },
     methods:{ 
         emitHome(){ 
             //广播
             VueEvent.$emit('to-home',this.msg)
         }
     },
    
     mounted(){ 
         VueEvent.$on('to-news',function(data){ 
             console.log(data);
         })
     }
     
    }
    </script>

###### 5.接下来是App.vue根节点和我的项目目录（方便大家查阅） ######

**App.vue**

<template>
      <div id="app">
       
       <v-home></v-home>
       <br>
       <hr>
       <br>
       <v-news></v-news>
      </div>
    </template>
    
    <script>
    import Home from './components/Home.vue';
    import News from './components/News.vue';
    
    export default { 
      name: 'App',
      data(){ 
        return{ 
          msg:'你好vue'
        }
      },
      components:{  /*前面的组件名称不能和HTML标签一样 */
        'v-home':Home,
        'v-news':News
      }
    }
    </script>
    
    <style>
    
    </style>

![在这里插入图片描述][20190222150046939.png]  
最后的页面效果是这样的：  
![在这里插入图片描述][watermark_type_ZmFuZ3poZW5naGVpdGk_shadow_10_text_aHR0cHM6Ly9ibG9nLmNzZG4ubmV0L1lZeGlhb2JhbzA3MjY_size_16_color_FFFFFF_t_70]  
非父子组件传值较为麻烦，一般用到的地方也不是很多，但是在有些面试的时候会有（这是老师说的）。  
关于非父子组件的传值详细请参考官方文档 [https://cn.vuejs.org/，][https_cn.vuejs.org] 若有任何疑问或是不解，请在下方评论，谢谢！

[20190222150046939.png]: /images/20220317/162557dbfb0e4426b3d51ff762e059d7.png
[watermark_type_ZmFuZ3poZW5naGVpdGk_shadow_10_text_aHR0cHM6Ly9ibG9nLmNzZG4ubmV0L1lZeGlhb2JhbzA3MjY_size_16_color_FFFFFF_t_70]: /images/20220317/19b98322e91d4e2db2686729fb20ca78.png
[https_cn.vuejs.org]: https://cn.vuejs.org/%EF%BC%8C