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

首先建立两个组件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组件传递的数据，反之也是一样的。如下：

点击前：

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

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

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