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核心思想。