vue基础：非父子组件传值

  • Z时代
  • 2024-01-10
  • 分类：综合

vue

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);
        })
    }

效果图：

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;

以上是 vue基础：非父子组件传值 的全部内容， 来源链接： utcz.com/z/376016.html

回到顶部