vue基础：非父子组件传值

ゝ一纸荒年。 2022-03-24 14:46 317阅读 0赞

#### vue基础：非父子组件传值 ####

本文共用到四个文件：  
根组件：App.vue  
两个子组件：Home.vue,News.vue  
js文件：eveemit.js  
文章最后有所有文件

**步骤**：  
1.新建一个js文件，引入vue并实例化，最后暴露这个实例  
vueemit.js文件

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

2.在要广播的地方映入刚才定义的实例。  
Home.vue向News.vue传，就要在Home.vue中广播  
先引入

import vueevent from '../model/vueemit.js';

3.通过 vueevent.$emit(‘名称’,‘数据’)

methods:{
           emitnews(){
               vueevent.$emit('to-news',this.msg)
           } 
        }

4.在接受的地方，监听广播  
vueevent.$on(‘名称’,‘数据’)

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

效果图：  
![在这里插入图片描述][watermark_type_ZmFuZ3poZW5naGVpdGk_shadow_10_text_aHR0cHM6Ly9ibG9nLmNzZG4ubmV0L2ExNDI0MjYxMzAz_size_16_color_FFFFFF_t_70]  
App.vue

<template>
      <div id="app">
        <v-home/>
        <v-news/>
      </div>
    </template>
    
    <script> import Home from './components/Home.vue'; import News from './components/News.vue'; export default { data(){ return{ } },methods:{ },components:{ 'v-home':Home, 'v-news':News } } </script>
    
    <style> </style>

Home.vue

<template>
        <div id="home">
            我是home组件
            <br>
            <button @click="emitnews()">给news传值</button>
            <br>
        </div>
    </template>
    
    <script> // import vueevent from '../model/vueemit.js'; export default { data(){ return{ msg:'我是一个home组件' } },methods:{ emitnews(){ vueevent.$emit('to-news',this.msg) } },mounted(){ vueevent.$on('to-home',function(data){ console.log(data); }) } } </script>
    
    <style> </style>

News.vue

<template>
        <div id="news">
            我是News组件
            <br>
        <button @click="eventhome()">给home传值</button>
        </div>
    </template>
    
    <script> import vueevent from '../model/vueemit.js'; export default { data(){ return{ msg:'我是一个新闻组件' } }, methods:{ eventhome(){ vueevent.$emit('to-home',this.msg) } }, mounted(){ vueevent.$on('to-news',function(data){ console.log(data); }) } } </script>
    
    <style> </style>

vueevent.js

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

[watermark_type_ZmFuZ3poZW5naGVpdGk_shadow_10_text_aHR0cHM6Ly9ibG9nLmNzZG4ubmV0L2ExNDI0MjYxMzAz_size_16_color_FFFFFF_t_70]: /images/20220323/dceb5cca2699465796c2e31863b18778.png