vue-learning：25 - component - 概念-定义-注册-使用-命名

概念

Vue遵循Web Component规范，提供了自己的组件系统。组件是一段独立的代码，代表页面中某个功能块，拥有自己的数据、JS、样式，以及标签。组件的独立性是指形成自己独立的作用域，不会对其它组件产生任何副作用。

Vue 组件是可复用 Vue 实例，接受相同的选项option对象 (除了一些根级特有的选项) 和使用相同的生命周期钩子，以及模板调用方式。

Vue 组件可以嵌套，所以组件之间可以进行引用和通信

组件定义

Vue提供了专用的API来定义组件，组件构造器函数： Vue.extend()

    const MyComponent = Vue.extend(option)

    // option跟new Vue(option)时基本相同（除了el/data）

这样，我们就构建好了一个组件，但现在还无法使用这个组件。还需要将这个组件注册到对应的应用中。

组件的注册

为了能在模板中使用，这些组件必须注册以便 Vue 能够识别。有两种注册方式：全局注册和局部注册。

全局注册

使用API：Vue.component就可以完成组件全局注册，全局注册的组件可以被多个Vue实例复用。

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

// 组件注册语句必须在new Vue(option)之前

局部注册

使用Vue实例的components属性注册局部组件，局部注册的组件只在包含它的父组件作用域内有效。

const MyChild = Vue.extend({

    template: `<p>{{ childMsg }}</p>`

    data: function() {

        return {

            childMsg: 'This is a child component'

        }

    }

})

const vm = new Vue({

    el: "#app",

    data: {

        msg: 'This is a parent component'

    },

    components: {

        MyChild: MyChild

    }

})

上述Child组件只在vm实例内有效。在其它新建的实例内无法引用。

注册语法糖

Vue对全局注册和局部注册都提供了简写方法，可以在注册的同时定义组件，Vue内部会自动调用extend方法构建组件。

Vue源码解读之Component组件注册

// 全局注册

Vue.component('MyChild', {

    template: `<p>{{ childMsg }}</p>`

    data: function() {

        return {

            childMsg: 'This is a child component'

        }

    }

})

// 局部注册

new Vue({

    el: "#app",

    data: {

        msg: 'This is a parent component'

    },

    components: {

        MyChild: {

            template: `<p>{{ childMsg }}</p>`

            data: function() {

                return {

                    childMsg: 'This is a child component'

                }

            }

        },

    }

})

组件的使用

在注册组件同时，也声明了一个自定义标签，即组件名。在Vue模板需要调用的地方使用组件名作为自定义的标签，直接调用组件。

<My-Child></My-Child>

注意事项：

option的区别

const MyChild = Vue.extend(option)

const vm = new Vue(option)

data必须是一个函数

因为组件是可复用的，如果组件的data是一个对象的直接引用，那复用多个组件将共享一个对象，其中一个组件修改了对象属性，其它组件引用了该对象属性的值也会变化，这是我不希望看到的。而通过函数返回值，将实现每个组件拥有独立的数据对象。

点击查看官方示例解释

new Vue({

    el: "#app",

    data: {

        msg: 'This is a parent component'

    },

    components: {

        MyChild: {

            template: `<p>{{ childMsg }}</p>`

            data: function() {

                return {

                    childMsg: 'This is a child component'

                }

            }

        },

    }

})

解析 DOM 模板时的注意事项

有些 HTML 元素，诸如 <ul>、<ol>、<table> 和 <select>，对于哪些元素可以出现在其内部是有严格限制的。而有些元素，诸如 <li>、<tr> 和 <option>，只能出现在其它某些特定的元素内部。

这会导致我们使用这些有约束条件的元素时遇到一些问题。例如：

<table>

  <blog-post-row></blog-post-row>

</table>

这个自定义组件会被作为无效的内容提升到外部，并导致最终渲染结果出错。幸好这个特殊的 is 特性给了我们一个变通的办法：

<table>

  <tr is="blog-post-row"></tr>

</table>

需要注意的是如果我们从以下来源使用模板的话，这条限制是不存在的：

字符串模板 (例如：template: '...')
单文件组件 (.vue)
<script type="text/x-template">

vue获取模板内容的N种方式，点击查看

组件的命名规范

官方组件命名风格指南

在JS域中使用PascalCase，在DOM模板域中使用kebab-case
以父组件或更高级别的单词开头，使用语义完整的单词

由于 HTML 是大小写不敏感的，在 DOM 模板中必须使用 kebab-case

在 JavaScript 中，PascalCase 是类和构造函数 (本质上任何可以产生多份不同实例的东西) 的命名约定，Vue 组件也可以有多份实例，所以同样使用 PascalCase 是有意义的。

点击查看DEMO

<div id="app">

    <p>{{ msg }}</p>

    <com-local></com-local>

    <com-global></com-global>

</div>

<p>=================================</p>

<div id="other">

    <p>{{ msg }}</p>

    <com-other-local></com-other-local>

    <com-global></com-global>

</div>

// 使用构造器函数定义组件

const ComLocal = Vue.extend({

    data: function() {

        return {

            msg: 'This is a local component'

        }

    },

    template: `<p>{{ msg }} by Vue.extend</p>`

})

// 全局注册组件，并且必须在new Vue()之前

Vue.component('ComGlobal', {

    data: () => {

        return {

            msg: 'this is a global component'

        }

    },

    template: `<p>{{ msg }} by Vue.component`

})

// 创建一个Vue 实例对象vm，调用全局组件和使用extend定义的局部组件

const vm = new Vue({

    el: "#app",

    data: {

        msg: 'This is a vm'

    },

    components: {

        ComLocal

    }

})

// 创建另一个Vue实例对象otherVm，调用全局组件和使用内部components属性定义的局部组件

const otherVm = new Vue({

    el: '#other',

    data: {

        msg: 'This is other Vue'

    },

    components: {

        comOtherLocal: {

            template: `<p>This is a local component by components properity</p>`

        }

    }

})

// 输出

This is a vm

This is a local component by Vue.extend

this is a global component by Vue.component

=================================

This is other Vue

This is a local component by components properity

this is a global component by Vue.component

巴特西