个人小总结：1年多没有写博客，感觉很多知识点生疏了，虽然工作上能解决问题，但是当别人问到某个知识点的时候，还是迷迷糊糊的，所以坚持写博客是硬道理的，因为大脑不可能把所有的知识点记住，有可能某一天忘了，但是我们工作上还是会使用，只是理论忘了，所以写博客的好处是可以把之前的东西重新看一遍后会在大脑里面重新浮现起来，特别在面试的时候，别人问你的知识点的时候答不上来那种尴尬，但是平时经常使用到，只是说不出所以来的，因此写博客是最好的思路。

阅读目录

1.vue组件注册步骤

Vue.js 的组件有三个步骤： 创建组件构造器(Vue.extend()方法 )，注册组件(Vue.component())和实例化组件。

如下demo：

浏览器编译后html结构会变为 

      
  
       
        hello world
       
      

页面运行显示为

hello world

2.理解组件的创建和注册。

2-1 Vue.extend() 是Vue构造器的扩展，调用Vue.extend()创建的是一个组件构造器，该构造器有一个选项对象，选项对象的template属性用于定义组件要渲染的html。

2-2 Vue.component() 是注册组件，需要2个参数，第一个参数是自定义组件的标签，第二个参数是组件的构造器。

2-3 组件需要挂载到某个Vue的实例下，否则不生效。

如下实例：

最终代码被渲染成为如下：

      
       
        hello world
       
      
      
       
        hello world
       
      

3.理解Vue全局注册和局部注册

调用Vue.component()注册组件时，组件的注册是全局的，如果想要使用组件的局部注册的话，可以用选项对象的components属性实现局部注册。

如下代码：中间就把第二步注册组件哪项移到实例化组件里面来了；如下代码：

实例化container2 是不生效的，并且在浏览器控制台会报如下错误：

4.理解父组件和子组件。

在一个组件中包含另一个组件，那么另一个组件就是该组件的子组件。

如下代码：

简单理解代码如下：

1. var Child = Vue.extend(...) 定义一个Child组件构造器。

2. var Parent = Vue.extend(...) 定义一个Parent组件构造器。

3. components: {'child-component': Child}, 将Child组件注册到Parent组件，并将Child组件的标签设置为 child-component;

4. template: 渲染html模板，找到template选项，然后使用 child-component组件。

5. 注册Parent组件 Vue.component('parent-component', Parent);

6. 最后实例化组件，需要到html元素为id='container1'里面去。

Child组件是在Parent组件中注册的，只能在Parent组件中注册的。如下几种情况都不行的。

4-1 以子标签的形式在父组件中使用；如下代码：

上面调用子组件的方式是无效的，因为在js里面当父组件要需要的html模板template的内容的时候已经决定了需要渲染什么，所以当parent-component运行的时候，在父组件使用自定义的子标签。

运行时会当做html的普通标签来渲染，但是它又不是普通的html标签，因此会被忽略掉。

4-2. 在父组件标签外使用子组件。

js代码还是上面的一样，运行完成后，在浏览器下会报错如下：

5.理解组件的语法糖。

我们可以使用更简单的方式来注册组件。

5-1 使用Vue.component()直接创建和注册组件。如下代码：

Vue.component()的第一个参数是标签名称，第二个参数是一个选项对象，使用选项对象的template属性定义，使用该方式，在Vue源码中会调用Vue.extend()方法。

注意： 在template元素中需要使用一个标签容器包围，比如我们可以把div元素去掉的话，只放内容的话，会报错如下：

5-2 在选项对象的components属性中实现局部注册。

6.学会使用 script或 template 标签。

虽然语法糖简化了组件注册，但是在template选项中拼接了html元素，这导致View和C层的高耦合性。幸运的是Vue.js 提供了2种方式将javascript中的html模板分离出来。

6-1 使用script标签, 如下代码：

注意： 使用<script>标签时，type指定为 text/x-template，是告诉浏览器这不是一段js脚本，浏览器在解析html文档时会忽略script标签内定义的内容。

6-2 使用<template>标签。不需要指定type属性。

如下代码：

7.理解使用props。

父组件的数据如何传给子组件呢？可以使用props把数据传给子组件。

代码如下：

注意： 在子组件中定义prop时，使用了camelCase命名法。由于HTML特性不区分大小写，camelCase的prop用于特性时，会转为短横线隔开的，比如上面的代码：

在props中定义的myName,在用作特性时需要转换为 my-name

理解prop的单向绑定

既然父组件使用props把数据传给了子组件，那么如果子组件修改了数据，对父组件是否有影响呢？

看下面的代码如下：

                          
      
      
       
                
         
                    
            父组件数据          
                 
                 
                    
name
                    
{
    { name }}
                    
                 
                 
                    
age
                    
{
    { age }}