Vue.js（3）----组件（上）

Vue.js最强大的功能之一绝对是组件了，组件可以扩展HTML元素，封装可重用的HTML代码，我们可以将组件看作自定义的HTML元素。当它是自定义的元素时，Vue.js的编译器可以为它添加一些特殊的功能。但是在某些情况下，是可以使用原生的HTML元素的方式。先不总结，我们现在继续向下看慢慢了解。

使用组件的基本步骤

1. 创建：调用Vue.extend()方法创建组件构造器
2. 注册：调用Vue.component()方法注册组件
3. 使用组件：在Vue实例范围内使用组件

现在我们按照以上的步骤来创建一个实例

以上html页面显示为： this is my first component
那么代码中出现的一些方法的作用是什么呢？

1. Vue.extend()是Vue构造器的扩展，调用Vue.extend()创建的是一个组件构造器。

2. Vue.extend()构造器有一个选项对象，选项对象的template属性用于定义组件要渲染的HTML。
3. 使用Vue.component()注册组件时，需要提供两个参数，第一个参数是组件的标签，第二个参数是组件构造器。
4. 组件应该挂载在某个Vue实例下，不然不会起作用。

全局注册和局部注册

调用Vue.component()注册组件时，注册的组件是全局的，这意味着该组件可以在任意Vue实例下使用。如果不需要全局注册，或者想让组件在其它的组件内也可以使用，那么可以注册局部变量。
第一个实例如果改成局部变量，那么就可以添加选项对象的component属性。

new Vue({
        el:'#view',
        component:{
            'my-component':myComponent
        }
    });

父组件和子组件

当我们在一个组件中注册和使用另一个组件时，那么这两个组件就是父子组件的关系。第一个实例也可以相应修改成如下代码：

添加了子组件的代码将会在页面中显示两行文字“This is a Parent componen"以及“This is a child component!”。那么在这次的实例中又是如何使用子组件的呢？

1. var Child = Vue.extend()定义了一个名为Child的组件构造器

2. var Parent = Vue.extend()定义了一个名为Parent的组件构造器
3. component:{'child-component':child}，将Child注册到Parent组件，并将组件的标签设置为child-component。
4. template :'

   This is a Parent component

   '在Parent组件内使用Child组件。
5. Vue.component('parent-component',Parent)全局注册Parent组件。
6. 在页面中使用渲染Parent组件的内容，同时Child组件的内容也被渲染出来

注意！子组件只能在父组件中被使用。

组件注册语法糖

以上的注册方式比较繁琐，所以提供了相对比较简便的“语法糖”简化了注册的过程，比如第一个实例可以直接将script中的代码改成如下：

Vue.component('my-component',{
        template:'
this is the first component!
'
    })
    new Vue({
        el:'#view'
    })

使用script和template标签

通过上面的例子，不难想到，当我们想要添加较多的html元素的时候，拼接各种html会很麻烦，同时也造成了HTML和JavaScript的高耦合性。因此，Vue.js提供了两种方式将定义在JavaScript中的HTML模板分离出来。

1. 使用

   注意！使用

   注意！在子组件中定义prop时，使用了camelCase命名法。但由于html特性不区分大小写，camelCase的prop用于特性时，需要转化为kebab-case（用短横线隔开），例如，在prop中定义的myName，在用作特性时需要转换为my-name。

   prop的绑定类型

   既然父组件把数据传给了子组件，那么当修改子组件的数据时，父组件是否会相应的产生影响呢？我们尝试一下修改一下上面的实例。

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

   运行这个修改后的页面，可以看到当我们修改父组件的数据时，子组件也会随之更改，而当我们修改子组件的数据时，父组件不会随之更改。

   vue之前的版本还有.sync指定双向绑定，.once指定单次绑定，在vue2.0已经被弃用，这里就不多说了。

   好啦，关于Vue.js组件基础知识（上）就先写到这里，下面的文章将会做一个实例巩固一下哦！如果您看到了这里，请点击一个喜欢！您的每一个赞对我都是莫大的鼓励！感谢！下个文章见！