vue学习笔记：非父子组件之间的传值

拼搏现实的明天。 2024-04-17 22:12 71阅读 0赞

首先建立两个组件title和news，用来验证非父子组建的传值，然后再把这两个组件引入根组件,显示即可，代码如下：

app.vue:

<template>
      <div id="app">
        <v-news></v-news>
        <hr>
        <v-title></v-title>
      </div>
    </template>
    
    <script>
    import Title from './components/Title'
    import News from './components/news'
    export default {
      data(){
        return{
        }
      },
      methods:{
       
      },
      components:{
        'v-title':Title,
        'v-news':News
      },
      mounted(){
       
      }
    }
    </script>
    
    <style>
    
    </style>

非父子组件之间的传值主要是在组件之间建立一个空vue实例，在空vue实例中创建实例并暴露出来，传值的组件通过引入空vue实例，并通过vue.$emit('名称','数据')传递数据，而接收数据的组件也是在组件中引入空vue实例,在通过vue.$on('名称',function(data)\{ data \})，就可以接收数据了，这里的名称必须是一样的。具体实现过程如下:

首先建立一个空实例文件dataSend.js:

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

其次在需要传递的组件中引入，title组件代码：

<template>
      <div id="title">
       <h1>{
       {msg}}</h1>
       <button @click="toNews()">给news组件广播数据</button>
      </div>
    </template>
    
    <script>
    // 引入组件中间实例
    import vueEvent from '../model/dataSend.js'
    export default {
      data(){
        return{
            msg:'这是一个标题组件',
        }
      },
      methods:{
        toNews(){
            vueEvent.$emit('to-news',this.msg)
        }
      },
      mounted(){
            vueEvent.$on('to-title',function(data){
                console.log(data)
            })
      }
     
     
    }
    </script>
    
    <style>
    
    </style>

在title组件中传递完数据之后，在news组件中接受数据,news组件代码：

<template>
      <div id="news">
        <h1>{
       {msg}}</h1>
        <button @click="toTitle()">给title组件传递数据</button>
      </div>
    </template>
    
    <script>
    // 监听广播接收title传递的数据
    import vueEvent from '../model/dataSend.js'
    export default {
      data(){
        return{
            msg:'这是一个新闻组件',
            name:'新闻',
            dataone:'首页第一个数据',
            title:'111'
        }
      },
      methods:{
        toTitle(){
          vueEvent.$emit('to-title',this.msg)
        }
      },
      mounted(){
        vueEvent.$on('to-news',function(data){
          console.log(data)
        })
      }
     
     
    }
    </script>
    
    <style>
    
    </style>

这样另个组件就可以在app根组件中看到打印的数据，比如点击title组件中的按钮--给news组件广播数据，然后会在news组件中打印title组件传递的数据，反之也是一样的。如下：

点击前：

![watermark_type_ZmFuZ3poZW5naGVpdGk_shadow_10_text_aHR0cHM6Ly9ibG9nLmNzZG4ubmV0L3dlaXhpbl80MjkzMTgyNQ_size_16_color_FFFFFF_t_70][]

点击按钮--给news组件广播数据后：

![watermark_type_ZmFuZ3poZW5naGVpdGk_shadow_10_text_aHR0cHM6Ly9ibG9nLmNzZG4ubmV0L3dlaXhpbl80MjkzMTgyNQ_size_16_color_FFFFFF_t_70 1][]

反之点击按钮--给title组件传递数据也是一样，可以在title组件中打印数据

![watermark_type_ZmFuZ3poZW5naGVpdGk_shadow_10_text_aHR0cHM6Ly9ibG9nLmNzZG4ubmV0L3dlaXhpbl80MjkzMTgyNQ_size_16_color_FFFFFF_t_70 2][]

这样就可以实现非父子组件之间的传值了。

[watermark_type_ZmFuZ3poZW5naGVpdGk_shadow_10_text_aHR0cHM6Ly9ibG9nLmNzZG4ubmV0L3dlaXhpbl80MjkzMTgyNQ_size_16_color_FFFFFF_t_70]: https://image.dandelioncloud.cn/pgy_files/images/2024/04/17/bddba5a23de44eaf98d1e9d5432e7231.png
[watermark_type_ZmFuZ3poZW5naGVpdGk_shadow_10_text_aHR0cHM6Ly9ibG9nLmNzZG4ubmV0L3dlaXhpbl80MjkzMTgyNQ_size_16_color_FFFFFF_t_70 1]: https://image.dandelioncloud.cn/pgy_files/images/2024/04/17/e3361c8106284aa5a2791472c36680b9.png
[watermark_type_ZmFuZ3poZW5naGVpdGk_shadow_10_text_aHR0cHM6Ly9ibG9nLmNzZG4ubmV0L3dlaXhpbl80MjkzMTgyNQ_size_16_color_FFFFFF_t_70 2]: https://image.dandelioncloud.cn/pgy_files/images/2024/04/17/23832e72175f4cb4a83a891f6940d048.png