Vue中如何定义， 使用， 操作组件

. 组件

这里有一个 Vue 组件的示例：

Vue.component('button-counter', { 
data: function () { 
return { 
count: 0 
} }, 
template: '<button v-on:click="count++">
     You clicked me {{ count }} times.
     </button>' 
})

组件是可复用的 Vue 实例，且带有一个名字：在这个例子中是 。我们可以在一个通过 new Vue 创建的 Vue 根实例中，把这个组件作为自定义元素来使用：

<div id="components-demo"> 
<button-counter></button-counter>
</div>

new Vue({ el: '#components-demo' })

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

总结

1.什么是组件

组件是Vue.js最强大的功能之一。组件可以扩展HTML元素，封装可重用的代码。在较高层面上，组件是自定义的元素，Vue.js的编译器为它添加特殊功能。在有些情况下，组件也可以是原生HTML元素的形式，以is特性扩展。

• 组件化思维
• 组件化针对的是页面中的整个完整的功能模块划分 （项目的分工）
• 组件的概念（ 一个文件 ）
  组件是一个html、css、js、image等外链资源，这些部分组成的一个聚合体
• 优点：代码复用，便于维护
• 划分组件的原则：复用率高的，独立性强的

* Vue中如何定义， 使用， 操作组件

• 组件
• Vue.extend() ===> 组件中也可以书写 Vue这个构造器函数中 options
• Vue.component() 为什么要执行这个方法呢？
• 组件的表现形式是标签，组件要想合法化， 必须注册

为什么组件使用必须注册？

• 组件的表现形式是标签，组件要想合法化， 必须注册

1. vue.js文件中暴露出一个Vue的构造器函数， 这个函数的作用，是用来实例化出来一个实例， 那么这个实例也是一个组件， 我们称之为 ‘根实例’
2. 我们从vue detools中我们发现这个实例的表现形式是一个标签
3. Vue为了扩展功能， 给了一个方法 ， 这个方法叫 extend
4. 我们对比 Vue vs Vue.extend() 我们发现这两个方法输出结果都是两个构造器函数， 并且很相似
5. 那么我们进一步得到一个结果： 使用方法一致吗？

• new Vue.extend() 报错 不需要进行实例化 ， 它希望组件的表现形式应该是标签
• 要想像标签一样使用， 必须准守 h5 的标准 ， 也就是说组件必须合法 ， 要想合法， 必须注册（登记）
• 组件使用前必须注册

如何注册组件？
   需要使用Vue.extend方法创建一个组件，然后使用Vue.component方法注册组件。Vue.extend方法格式如下：

var MyComponent = Vue.extend({
    // 选项...后面再介绍
})

如果想要其他地方使用这个创建的组件，还得个组件命个名：

Vue.component('my-component', MyComponent)

命名之后即可在HTML标签中使用这个组件名称，像使用DOM元素一样。下面来看看一个完整的组件注册和使用例子。    html代码：

<div id="example">
    <my-component></my-component>
 </div>

js代码：

  // 定义
var MyComponent = Vue.extend({
    template: '<div>A custom component!</div>'
})

// 注册
Vue.component('my-component', MyComponent)

// 创建根实例
new Vue({
    el: '#example'
})

输出结果：

<div id="example">
    <div>A custom component!</div></div>

组件的注册有两种方式

注册的标准写法：

var Hello = Vue.extend({
template: '<div> hello component </div>'
})
Vue.component('Hello',Hello)

1. 全局注册

注册一个全局组件语法格式如下：

Vue.component(tagName, options)

tagName 为组件名，options 为配置选项。注册后，我们可以使用以下方式来调用组件：

<tagName></tagName>

所有实例都能用全局组件。

2. 局部注册

你不必把每个组件都注册到全局。你可以通过某个 Vue 实例/组件的实例选项 components注册仅在其作用域中可用的组件：

new Vue({
components: {
组件名： 组件的配置项
}
})

组件命名建议使用两种方式

1.帕斯卡命名方式：ComponentName
2.短横线分隔：component-name
使用自定义元素的时候，两种命名方式都允许，但是当应用到dom的时候，应该使用短横线分割命名方式。如下，两种命名方式都是正确的：

使用 kebab-case
举例
Vue.component(‘header-title’,{})
使用 PascalCase
举例：
Vue.component(‘MyComponentName’, { /* … */ })

解释： 为什么要是上面两种写法 ?
为了区别html的原生标签

组件嵌套： 局部注册形式

组件本身也可以包含组件，子组件必须在父组件中注册之后才能在父组件的模板中使用,下面的parent组件就包含了一个命名为child-component组件，但这个组件只能被parent组件使用:

var child = Vue.extend({
    template: '<div>A custom component!</div>'
});
var parent = Vue.extend({
    template: '<div>Parent Component: <child-component></child-component></div>',
    components: {
        'child-component': child
    }
});
Vue.component("parent-component", parent);

上面的定义过程比较繁琐，也可以不用每次都调用Vue.component和Vue.extend方法:

// 在一个步骤中扩展与注册
Vue.component('my-component', {
template: '<div>A custom component!</div>'
})

// 局部注册也可以这么做
var Parent = Vue.extend({
    components: {
        'my-component': {
            template: '<div>A custom component!</div>'
        }
    }
})

template

组件根元素唯一

1. 组件的template如果body里面的话，一定记住要放在 #app 的div外
2. 组件的template在body中使用的话， 是不会解析的， 但是组件内的template是会解析的
3. 组件的模板中的直接子元素必须有一个， 如果你要有多个， 必须使用v-if v-else-if

data选项(data必须是函数)

根实例中的data选项是一个对象， 但是为什么组件中的data选项是一个函数 ？
解释：
函数的作用：

1. 函数有独立作用域
2. 函数可以有return 返回值 ，
   组件的data选项必须有return 返回值， 并且返回值是一个对象
   组件的数据在组件的模板中使用