Vue.js入门（三）——关于组件以及组件通信

前言

学习过angular2都知道angular的核心是组件，通过组件之间可以通信，同样Vue.js组件也可以进行通信，只是和angular2有一些不一样！

内容

vue的每一个组件包括三个部分template，scripte，style.

使用组件两步操作：创建组件和注册组件。

1.创建组件：

---

在vue环境下创建一个组件非常容易，只需要在components文件夹下面创建一个带有后缀名的.vue的文件(这里以child.vue为例），快速编写组件只需要在文件中输入“scaffold”，然后enter一下就可以了。我上网搜索了一下，是脚本架的意思，他应该是写在了vscode的一个snippets（代码块）。参考的博客可以看这一篇（[VS Code]跟我一起在Visual Studio Code 添加自定义snippet（代码段），附详细配置）

2.注册组件：注册的方式有两种，一种是全局注册，一种是局部注册；

---

• 全局注册：
  main.ts文件

import Vue from 'vue'
import App from './App'
import router from './router'
import subVue from './components/sub';
//全局注册方式-在任何地方都可以使用
Vue.component("subVue",subVue);

new Vue({
  el: '#app',
  router,
  template: '<App/>',
  components: { App }
})

全局注册的方式在任何vue组件页面中都是可以直接使用的，例如在app.vue中使用subVue直接在template中输入

<sub-vue></sub-vue> //其他地方不需要使用；

• 局部注册（以app.vue中注册subVue）

<template>
  <div id="app">
    <sub-vue></sub-vue>
  </div>
</template>

<script>
//局部注册方式
import subVue from './components/sub';
export default {
  components:{
     subVue:subVue
  }

}
</script>
<style>
</style>

局部注册的方式只需要在本组件中使用，其他地方使用还需要再次的注册。

---

组件通信是相互的，但是组件通信的方式是不同的，在app.vue中注册sub.vue，使用sub.vue，那他们之间app.vue相当于是sub.vue的父组件，sub.vue是app.vue的子组件：

组件通信两种方式：

- 父组件向子组件通信采用：属性值方式

/**sub.vue文件下*/
<template id="header">
<div>我是{{textone}}儿子</div>
</template>
<script>
export default {
   props:['textone'] //准备接收父类传过来的值
}

/**%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%*/

/**sub.vue文件下*/
<template>
  <div id="app">
    <sub-vue textone="大"></sub-vue> <!--传送常量方式-->
    <sub-vue :textone="textbody"></sub-vue> <！--传送变量方式-->
  </div>
</template>
import subVue from './components/sub';
export  default {
  components:{
     subVue:subVue
  },
  data(){
    return{
      textbody:'测试'
    }
  },

}
</script>

- 子组件向父组件通信采用：动态监测方式

子组件向父组件传送消息，必须是动态，因为此时子组件已经初始化，活动中，子组件之前父组件就已经初始化了，父组件应该去实时监听一下子组件，而且子组件传送出消息，父组件还需要知道这个消息是传送给自己的，所以他们需要自己的一套联系方式,所以产生了connector对象：
connector.js:

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

通过父子组件操作connector对象，父组件进行监听，on一下，子组件发出emit事件就会被父组件监听到：

/** sub.vue文件 */
<template>
  <div>
    我的儿子
<button @click="call">子类</button>

  </div>

</template>

<script>
import connector from '../connector.js';
export default {
  methods:{
   call(){
       connector.$emit('phone','马上到') //子组件发出事件
   }
  }
}
</script>

/**%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%*/

/**app.vue*/
<template>
  <div id="app">
    <!-- <img src="./assets/logo.png">
    <router-view/> -->
    <header-vue textone="大"></header-vue>
    <body-vue :textbody="textbody"></body-vue>
    <footer-vue></footer-vue>
    <button @click="listen">父类</button>

  </div>
</template>
<script>
import connector from './connector.js';
//引入组件：
import subVue from './components/sub.vue';
export  default {
  methods:{
    listen(){
      connector.$on('phone',function(msg){
        console.log(msg); //父组件监听事件
      })
    }
  }
}
</script>

在子向父传送事件的时候，必须父组件先监听connector对象，一旦发现子向监听的这个对象传送消息才能发现，就向打电话一样，你只有把手机放在身边，实时通过电话铃监听有没有人给你打电话，一旦有就接听到，如果你没有进行监听，手机静音就可能接收不到电话。

总结

组件开发已经接触过angular语言的程序员一点都不陌生，组件开发使前端开发更加高效，可以进行复用，减少了代码量，减少了网页加载的负担，提高了速度；同时组件之间的通信也让组件更加灵活。总之组件化开发都是angular2和vue.js核心思想。