缘起

新的一天又开始啦，大家也应该看到我的标题了，是滴，Vue基础基本就到这里了，咱们回头看看这一路，如果你都看了，并且都会写了，那么现在你就可以自己写一个Demo了，如果再了解一点路由，ajax请求（这里是axios），那么你就可以准备面试前端了，哈哈，当然没有这么夸张，往后的路还很长，至少咱们基础都会了。

这里咱们再温习下之前讲了哪些基础知识：

《十五 ║Vue前篇：了解JS面向对象原理 & 学会嵌套字面量等4种函数定义 & this指向》

《十六 ║Vue前篇：ES6知识详细说明 & 如何在JS中进行模块化编程》

《十七 ║Vue基础：第一次页面引入Vue.js，了解 Vue实例是如何通过数据驱动来操作DOM的》

《十八 ║Vue基础: 学习了常用的十大指令并一一举例，然后了解到了Vue的计算属性，侦听器，当然还有过滤器》

《十九 ║Vue基础: 通过样式的动态绑定，进一步学习Vue是如何操作DOM的，然后深入了解生命周期的八个阶段，以及其中的职能》

一共是五篇，基本已经涵盖了Vue的基础知识，今天呢，再说完组件以后，明天就正式开始搭建本地脚手架，终于开始安装软件了[ 哭笑 ]，我这几天考虑了一下，在之后的讲解中，可能需要两个小项目的讲解，第一个就是我现在自己用到的一个，大家其实也可以看看 http://vue.blog.azlinli.com（买的服务器不好，首次加载慢），也不是啥隐私，这个是我之前练习的时候自己瞎玩的，只有首页和详情页，用的数据就是咱们在之前系列里讲到的.net core api，这个可能在本周，或者本周末说到，主要的就是把之前的讲解给穿起来，然后再说下如何使用路由 v-router 和 ajax请求——axios，这样我这个项目就说到这里，然后第二个也是一个博客系统，用的是一套数据，只不过是用到了 Nuxt 框架了，基本结构又发生了变化，项目整体被封装了，更趋于工程化，至于为什么要用到这个，就是因为它可以解决 MVVM 前后端分离的 SEO 的老大难的问题，大家可以先问问度娘，到时候都会说到滴。好啦，开始今天的基础篇最后一章节 —— 深入了解下组件。

零、今天要完成天青色的部分

image

一、组件的基本使用

1、注册组件

上篇文件我们也说到了，注册组件的其中一个办法就是 Vue.component()方法，先传入一个自定义组件的名字，然后传入这个组件的配置。

 Vue.component('mycomponent',{
    template: `<div>我的组件</div>`,
    data () { return {
        message: '老张的哲学' }
    }
  })

定义好后，我们就可以在Vue实例所定义的DOM元素内使用它（就是我们在new vue的时候的 el 节点），这里我们的页脚组件，全局组件，可以在其他地方使用

 <div id="app">
    <mycomponent></mycomponent>
    <my-component></my-component>
</div>
<script>

//注意要在vue实例之前去定义，不然渲染页面的时候，会报错 // 定义一个名为 footer-vue 的新组件
 Vue.component('footer-vue', {
     template: ` <div id="footer-vue">
                 <p>2018 <a href="#">LZ's Blog</a> - Hosted by <a href="#" style="font-weight: bold">Coding Pages</a></p>
                 <p>
                     <a href="#">京ICP备00000000号</a>
                 </p>
             </div> `,
     data () { return {
             message: 'hello world' }
     }
 }) var app = new Vue({
    el: '#app',//没错，vue实例所定义的DOM元素就是这个，超过了这个区域，定义的组件会无效
 data: {
    },
  }) </script>

这个时候，我们定义的组件是一个全局的组件，也就是说如果我们定义了多个 vue实例，我们都可以使用这一个组件，这就是全局的，当然，既然有全局的，我们也有局部的（我们对联系方法定义局部组件，表示只有在当前页面的app元素内使用）：

var app = new Vue({
    el: '#app',
    data: {
    },
    components: { 'my-component': {
         template: ` <ul class ="contact-list non-style-list">
     <li>
         <b class ="twitter">TWITTER</b>: <a href="#">@laozhang</a>
     </li>
     <li>
         <b class ="weibo">微博</b>: <a href="#">@laozhang</a>
     </li>
     <li>
         <b class ="zhihu">知乎</b>: <a href="#" ></a>
     </li>
     <li>
         <b class ="github">GITHUB</b>: <a href="https://github.com/anjoy8">anjoy8</a>
     </li>
     <li>
         <b class ="email">EMAIL</b>: <a href="mailto:laozhang@azlinli.com">randypriv at azlinli</a>
     </li>
 </ul> `,

　　　　　　data () {
　　　　　　　　　　return {
　　　　　　　　　　　　　　message: 'hello world two'
　　　　　　　　　　}
　　　　　　}

 }
    }
  })

2、组件的规范定义——单个根元素 + 函数

观察一下上边两种写法与的特点，大家应该也能说出来：

相同点：组件的模板只能有一个根节点，或者说根标签只能有一个（第一个的根元素是 <div>，第二个根元素是 <ul>），如果定义成这样就是不允许的，这里是两个根元素 <div> 和 <a>：

template: `<div>我的地盘听我的，哈哈，只能在当前我的Vue实例中使用</div>
<a>我的一个标签</a>
　　　　　　`,

不同点：

我们看到在定义组件的时候和平时定义的data不一样，这里的定义一定要是一个函数，因为如果像Vue实例那样，传入一个对象，由于JS中对象类型的变量实际上保存的是对象的引用，所以当存在多个这样的组件时，会共享数据，导致一个组件中数据的改变会引起其他组件数据的改变。而使用一个返回对象的函数，每次使用组件都会创建一个新的对象，这样就不会出现共享数据的问题来了。

 Vue.component('footer-vue', {
     template: ` <div id="footer-vue">
                 <p>
                     <a href="#">京ICP备00000000号</a>
                 </p>
             </div> `,
     data ：{
             message: 'hello world'//我们用普通属性的方法
 }
 })

如果我们按照一个属性的写法的话，页面会成功的报了一个这样的错误，而且大家注意，这个错误是出现在哪里的，没错就是挂载结束前，也就是说，和实例化数据没影响，但是在挂载到页面，页面渲染的时候，出现了这个错误，所以大家在初学的时候，还是要多了解下生命周期的概念。

image

注意：因为组件是可复用的 Vue 实例，所以它们与 new Vue 接收相同的选项，例如 data、computed、watch、methods 以及生命周期钩子等。仅有的例外是像 el 这样根实例特有的选项。

3、另外一种注册方式，通过 全局API：Vue.extend()创建，然后由component来注册，两步

// extend 创建组件
var MyComponent = Vue.extend({
  template: '<div>A custom component!</div>' }); // component注册 组件
Vue.component('my-component', MyComponent);//使用到了 extend 创建的组件 var vm = new Vue({
  el: '#example',
  data: {

  }
})

两种写法没有什么太多的区别，基本来说

extend 是构造创建一个组件的语法器，你给它参数 他给你创建一个组件， 然后这个组件，你可以作用到Vue.component 这个全局注册方法里， 也可以在任意vue模板里使用apple组件

var apple = Vue.extend({
….
})
Vue.component(‘apple’,apple)

你可以作用到vue实例或者某个组件中的components属性中并在内部使用apple组件

new Vue({
components:{
apple:apple
}
})

---

可见上边的定义过程比较繁琐，也可以不用每次都调用两个，可以直接用 Vue.component 创建 ，也可以取组件 例如下

var apple = Vue.component(‘apple’)

4、动态组件

你一定在开发中会遇到这样的需求，就是一个banner的切换：

image

我们这时候可以使用动态组件，很容易实现这个需求，通过 Vue 的 <component> 元素加一个特殊的 is 特性来实现：

<!-- 组件会在 `currentTabComponent` 改变时改变 -->
<component v-bind:is="currentTabComponent"></component>

在上述示例中，currentTabComponent 可以包括

• 已注册组件的名字，或
• 一个组件的选项对象

<div id="dynamic-component-demo" class="demo">
  <button
    v-for="tab in tabs"//for 循环展示 banner v-bind:key="tab" v-bind:class="['tab-button', { active: currentTab === tab }]"//绑定样式，当前组件增加 active 样式 v-on:click="currentTab = tab"
  >{{ tab }}</button>
<!-- 组件的使用 通过currentTabComponent 来动态展示是哪一个组件 -->
  <component
    v-bind:is="currentTabComponent"//通过 is 特性，来动态实现组件，核心
    class="tab"
  ></component>
</div> //定义三个组件，可以比如是我们的三个页面，
Vue.component('tab-home', { 
    template: '<div>Home component</div>' //组件1，也就是页面1
})
Vue.component('tab-posts', { 
    template: '<div>Posts component</div>' //组件2，页面2
})
Vue.component('tab-archive', { 
    template: '<div>Archive component</div>' //组件3，页面3
}) new Vue({
  el: '#dynamic-component-demo',
  data: {
    currentTab: 'Home',//当前banner名称
    tabs: ['Home', 'Posts', 'Archive']//定义三个banner
  },
  computed: {//计算属性，实时监控获取当然banner的值，并返回到页面
    currentTabComponent: function () { return 'tab-' + this.currentTab.toLowerCase()//组件名称拼串，一定要和上边的三个组件名对应
    }
  }
})

二、属性Props —— 父子通讯（父传子）

在 Vue 中，父子组件的关系可以总结为 prop 向下传递，事件向上传递。父组件通过 prop 给子组件下发数据，子组件通过事件给父组件发送消息，这里咱们先说下向下传递，通过属性Props属性来完成。

1、使用动态属性Props，可以将父组件的数据传递给子组件，从而达到父子通讯的第一步，举个栗子

还记得之前咱们说的，Vue 其实就是由许许多多个组件拼接而成，高效复用，相互之间可以传值，但是又不受影响，最常见的应用就是：组件 A 在它的模板中使用了组件 B。它们之间必然需要相互通信：父组件可能要给子组件下发数据，子组件则可能要将它内部发生的事情告知父组件。大家第一次使用的时候可能会有点儿不舒服，但是使用熟练以后，就会发现真的得心应手，所以咱们就先看看组件是如何通讯的。

image

首先大家还记得咱们定义的页脚组件么，就是刚刚说到的。咱们看到最下边是备案号，现在想在备案号旁边加上咱的昵称”老张的哲学“，想想很简单嘛，想想肯定不能直接写死数据吧，正好看到页面内定义vue实例的时候，有这个属性嘛，直接放到咱们的页脚组件里，嗯就是这样：

     // 定义一个名为 footer-vue 的新组件
  Vue.component('footer-vue', {
      template: ` <div id="footer-vue">
                      <p>2018 <a href="#">LZ's Blog</a> - Hosted by <a href="#" style="font-weight: bold">Coding Pages</a></p>
                      <p>
                          <a href="#">京ICP备00000000号{{authorHtml}}</a>
                      </p>
                  </div> `,
      data () { return {
              message: 'hello world' }
      }
  })

然后满怀开心的刷新页面一看，额报错了：

image

然后很熟练的必应翻译了一下（这是一个反面教材，大家要好好学习英文，多看国外教程 [苦笑] ），得到这样的：属性或方法 "authorHtml " 不应该是在实例上定义的, 而是在呈现过程中引用的。通过初始化属性, 确保此属性在数据选项或基于类的组件中是被动的。说人话就是，这里不能使用实例上定义的值，好吧，查阅资料发现，组件只能被动的接受父组件的传参数，嗯于是乎我们这样写：

 <footer-vue :foo="author"></footer-vue>//在自定义的组件上，新增一个动态属性，然后属性的值 author 是父组件的，这个时候父组件就是已经把值给发过去了</pre>

这个时候，我们就需要在子组件里接受一下

<pre style="color: rgb(0, 0, 0); font-family: &quot;Courier New&quot;; font-size: 12px; margin: 5px 8px; padding: 5px;"> // 定义一个名为 footer-vue 的新组件
 Vue.component('footer-vue', {
     template: ` <div id="footer-vue">
                 <p>2018 <a href="#">LZ's Blog</a> - Hosted by <a href="#" style="font-weight: bold">Coding Pages</a></p>
                 <p>
                     <a href="#">京ICP备00000000号{{foo}}</a>//这里根据自身的props的参数来赋值
                 </p>
             </div> `,
     props: ['foo'],//这里根据组件的props属性，来被动接受组件传递来的参数
 data () { return {
             message: 'hello world' }
     }
 })

刷新页面，这时候就真正的成功了。

image

2、使用静态Props传值

这里我们得到的结果和上边的是一样的，直接是一个字符串结果，而不是一个变量属性。

Vue.component('child', { // 声明 props
  props: ['message'], // 就像 data 一样，prop 也可以在模板中使用 // 同样也可以在 vm 实例中通过 this.message 来使用
  template: '<span>{{ message }}</span>' }) <child message="老张的哲学"></child>

3、注意大小写的命名的写法

注意：HTML 特性是不区分大小写的。所以，当使用的不是字符串模板时，camelCase (驼峰式命名) 的 prop 需要转换为相对应的 kebab-case (短横线分隔式命名)，比如 如何上边的foo 写成了 fooPro ，那我们定义属性的时候，就应该写 foo-pro

<footer-vue :foo-pro="author"></footer-vue>

如果我们写了 fooPro 这样的写法，挂载页面的时候，就会警告，并且不会成功渲染

image

image

如果你使用字符串模板，则没有这些限制。（字符串模板：指的是在组件选项里用 template:"" 指定的模板，换句话说，写在 js 中的 template:"" 中的就是字符串模板。）

三、自定义事件 —— 子传父

我们知道，父组件使用 prop 传递数据给子组件。但子组件怎么跟父组件通信呢？这个时候 Vue 的自定义事件系统就派得上用场了。

1、使用 v-on 绑定自定义事件

每个 Vue 实例都实现了事件接口，即：

• 使用 $on(eventName) 监听事件
• 使用 $emit(eventName) 触发事件

Vue 的事件系统与浏览器的 EventTarget API 有所不同。尽管它们的运行起来类似，但是 $on和 $emit 并不是addEventListener 和dispatchEvent 的别名。

另外，父组件可以在使用子组件的地方直接用 v-on 来监听子组件触发的事件。

<div id="counter-event-example">
  <p>{{ total }}</p>
  <button-counter v-on:increment="incrementTotal"></button-counter>
  <button-counter v-on:increment="incrementTotal"></button-counter>
</div> Vue.component('button-counter', {
  template: '<button v-on:click="incrementCounter">{{ counter }}</button>',
  data: function () { return {
      counter: 0 }
  },
  methods: {
    incrementCounter: function () { this.counter += 1
      this.$emit('increment')
    }
  },
}) new Vue({
  el: '#counter-event-example',
  data: {
    total: 0 },
  methods: {
    incrementTotal: function () { this.total += 1 }
  }
})

2、使用自定义事件的表单输入组件

自定义事件可以用来创建自定义的表单输入组件，使用 v-model 来进行数据双向绑定。要牢记：

<input v-model="something">

这不过是以下示例的语法糖：

<input
  v-bind:value="something" v-on:input="something = $event.target.value">

所以在组件中使用时，它相当于下面的简写：

<custom-input
  v-bind:value="something" v-on:input="something = arguments[0]">
</custom-input>

<div id="app">
      <custom-input v-model="something"></custom-input>
    <br/> {{something}} </div>

// 注册
Vue.component('custom-input', {
  props:['something'],
  template: '<input type="text"  v-bind:value="something" v-on:input="updateValue($event.target.value)"/>',
  methods:{
      updateValue:function(value){ this.$emit('input', value)
      }
  }
}) var vm = new Vue({
  el: '#app',
  data: {
       something:'' }

})

四、使用插槽slot分发内容（完善中）

在使用组件时，我们常常要像这样组合它们：

<app>
  <app-header></app-header>
  <app-footer></app-footer>
</app>

注意两点：

• <app> 组件不知道它会收到什么内容。这是由使用 <app> 的父组件决定的。
• <app> 组件很可能有它自己的模板。

为了让组件可以组合，我们需要一种方式来混合父组件的内容与子组件自己的模板。使用特殊的 <slot> 元素作为原始内容的插槽。

一个常见错误是试图在父组件模板内将一个指令绑定到子组件的属性/方法：

<!-- 无效 -->
<child-component v-show="someChildProperty"></child-component>

正确做法：

Vue.component('child-component', { // 有效，因为是在正确的作用域内
  template: '<div v-show="someChildProperty">Child</div>',
  data: function () { return {
      someChildProperty: true }
  }
})

单个插槽

假定 my-component 组件有如下模板：

<div>
  <h2>我是子组件的标题</h2>
  <slot> 只有在没有要分发的内容时才会显示。 </slot>
</div>

父组件模板：

<div>
  <h1>我是父组件的标题</h1>
  <my-component>
    <p>这是一些初始内容</p>
    <p>这是更多的初始内容</p>
  </my-component>
</div>

渲染结果：

<div>
  <h1>我是父组件的标题</h1>
  <div>
    <h2>我是子组件的标题</h2>
    <p>这是一些初始内容</p>
    <p>这是更多的初始内容</p>
  </div>
</div>

五、结语

今天简单的说了下关于组件的一些问题，因为事件的问题，还没有说完，还在进一步整理当中，大家可以以后进一步的浏览本博文，通过组件的学习，大家在Vue开发的道路上又进了一步，好啦，关于Vue的基础知识就是这么多了，明天开始进入代码练习啦~~

六、CODE

https://github.com/anjoy8?tab=repositories

QQ群：
867095512 (blod.core)