vue2视频教程系列第十八节-非父子组件的通信

vue视频教程系列第十八节-非父子组件的通信

前一节课呢我们介绍了父子组件主动获取数据的方法，这一节课我们主要了解一下非父子组件是如何通信的。

       在课程开始之前呢，我们先来认识一下ref这个属性。ref用来给元素或子组件注册引用信息的，引用信息将会注册在父组件的$ref对象上。如果用在普通的DOM元素上，引用指向的就是DOM元素，如果用在子组件，引用就指向组件实例。什么意思呢，我们用一个小实例来说明一下：

       首先我们在DOM结构里创建一个input,并为其设置一个ref属性，再设置一个button做为触发事件，如下：

<input ref="name">

<button @click="lookme></button>

js部分：

methods: {

 lookme() {

    console.log(this.$ref.name)

}

}

我们可以看到控制台里的内容是<input ref="name">，这似乎似曾相识有没有？我们在用js操作DOM时，用的document.getElementById()，效果是一样的。

ref用在组件里也是同样道理，下面我们就来介绍一下Home组件如何从About组件里获取数据的。讲下步骤：

创建一个公共的空实例对象：VueEvent.js

import Vue from 'vue'

var VueEvent = new Vue()

export default VueEvent

2. 新建两个组件，分别是是Home，About，在每个组件里引入VueEvent.js：

import VueEvent from '../VueEvent.js'

3.在根组件里分别引入这两个组件

html部分：

<div id="root">

     <v-home></v-home>

     <br>

     <br>

     <br>

     <hr>

     <br>

     <v-about></v-about>

  </div>

js部分：

import Home from './views/Home.vue'

  import About from './views/About.vue'

  export default {

    components: {

      "v-home": Home,

      "v-about": About

    },

    data() {

        return {

        }

    }

  }

4.在About组件里设置一个title数据

data () {

  return {

      title: "这是about组件"

  }

  }

5.在DOM里设置一个触发的按钮：

<div class="about">

   这是about组件

     <button class="button" @click="emitToHome"></button>

  </div>

6.编写触发事件，将数据发送出去。VueEvent是一个中间仓库，主要做用就是来传递数据。

methods: {

    emitToHome() {

     //$emit有两个参数，第一个参数是自定义的名称，这个名称要与接收的名称一致；第二个参数是发送的数据。

      VueEvent.$emit("tohome", this.title)

    }

  }

7.在Home组件里接收数据，因为需要在组件初始化完毕就需要接收，所以需要在mounted里编写：

mounted () {

   //$on也是有两个参数，第一个参数是名称，要与发送数据的名称一致；第二个参数是回调函数，返回数据data

    VueEvent.$on("tohome", function(data) {

       this.title = data

       console.log(this.title)

    })

  }

到此，我们就可以看到控制台上输出的数据喽！“这是about组件”！

就到这里了，休息休息一会儿〜

欢迎关注前端学习交流群：duzhan2018