当前位置: 首页>前端>正文

react非父子组件怎么用useState传值 vue非父子组件传值

vue之非父子组件传值

如何进行非父子组件传值,下面举例说明。

比如说有两个兄弟组件要进行传值,我们把这两个兄弟组件当做两个城市,一个是home城市,一个news城市。我们把传值当做发送快递。

我们想要发送快递就的有一辆专门的快递车,来帮助我们传递快递,并且要求这辆快递车是可以全国都可以跑的,也就是说我们需要定义一个Vue的实例对象,这个Vue实例对象就是我们的快递车。

有了快递车,我们发送的时候需要叫快递车过来我们这里拿邮件,所以我们必须在home里引入这个快递车,也就是Vue实例对象。然后把我们的快递打包写上我们的名字装到快递车里,然后通过 $emit 发送给news。

news也需要引入快递车来接收快递,通过 $on 指定接受的快递名称来接收数据。

这样就实现了非父子组件的传值。

示例:Home组件给News组件传值

1.首先,我们需要打造一辆快递车,我们在 src目录下创建一个model目录来存放我们的车工场。车工场名称随意,在这里我们命名为 VueEvent.js ,这里车工场就是用来生产快递车。

a.创建车工场

react非父子组件怎么用useState传值 vue非父子组件传值,react非父子组件怎么用useState传值 vue非父子组件传值_数据,第1张

b.在车工场里生产快递车



// VueEvent.js文件

import Vue from 'vue';

var VueEvent = new Vue();
export default VueEvent

// 通过vue实例化出一个名称VueEvent对象,这个VueEvent就是我们的快递车;
// export default VueEvent 将VueEvent实例暴露,也就是把我们的快递车投入到使用中。如果不暴露的话,大伙就不能使用。



2. 在Home组价里操作

a. 先引入这个快递车到home里,也就是引入VueEvent这个对象



// 在script标签里引入

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



b. 我们给home中的一个button按钮绑定一个事件。



<template>
  <div>
    首页组件
    <br>
    <button @click="emitNews()">给news组件广播数据</button>
  </div>
</template>



c. 我们定义一个emitNews方法,当按钮点击时执行方法。



<script>
  import VueEvent from '../model/VueEvent.js'
  export default {
    name:"home",
    data(){
      return {
        msg:"我是一个home组件",
      }
    },
    methods:{
      emitNews(){
        VueEvent.$emit('to-news',this.msg)
      }
    },
  }
</script>

// emitNews方法中,我们通过快递车 VueEvent 的包裹 $emit,将我们的数据 this.msg 放入里面并贴上标签 to-news.
// 当该方法执行时,快递车就会把这个快递给我们邮走,快递车会一直在全国广播这,这个快件的名臣,各组件都在一直监听着 ,如果是自己想要的快件就直接告诉快递车拿过来



3. 在News组件里操作

a.我们也需要引入快递车,不管是发送还是接受都需要这个快递车,所以第一步我们先引入。



// script标签里

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



b. 因为快递车发快件的方式是广播,也就是说只有一只监听才可以知道有没有我们想要的这快件,所以我们要在 mounted 这个监听钩子里写代码。



<script>
  import VueEvent from '../model/VueEvent.js'
  export default {
    name:"news",
    data(){
      return {
        msg:"我是一个news组件",
      }
    },
    mounted() {
      VueEvent.$on('to-news',(data)=>{
        console.log(data);
      })
    },
  }
</script>

// 在mounted函数里会一直监听,监听 VueEvent 这两车,如果有广播,则通过 $on 来接收快件,要接收的快件名为 to-news ,data就是我们的快件里的数据



4. 我们验证一下,实验中,我们写了双向的传值,就是home可以给news组件传值,news可以给home传值,道理都是一样的。

react非父子组件怎么用useState传值 vue非父子组件传值,react非父子组件怎么用useState传值 vue非父子组件传值_实例化_02,第2张

 



https://www.xamrdz.com/web/2a41937790.html

相关文章: