vue-learning: 25 - component - concept - Definition - registered - use - named

concept

VueFollow the Web Componentspecification, it provides its own components of the system. Component is a separate piece of code that represents a page in a function block with its own data, JS, styles, and labels. Independence means that the components form their own independent scope, without any side effects on other components.

Vue components are reusable Vue example, accept the same options option objects (except for some root level-specific options) and the same life cycle hook, and the template is called.

Vue component can be nested, communication can be performed between the reference component and

Component Definition

VueProviding special API to define the components, component constructor functions: Vue.extend()

    const MyComponent = Vue.extend(option)
    // option跟new Vue(option)时基本相同（除了el/data）

In this way, we build up a good component, but now can not use this component. This component also need to be registered with the corresponding application.

Registration component

In order to use the template, these components must be registered in order to Vuebe able to identify. There are two types of registration: registered globally and locally registered .

Global registration

Use API: Vue.componentto complete assembly of global registration, registration component may be a plurality of global Vueinstances multiplexed.

Vue.component('my-component', MyComponent)
// 组件注册语句必须在new Vue(option)之前

Local registration

Use Vueinstance componentsattribute registration local component assembly comprising only locally registered its parent component effective scope.

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
    }
})

The above-described Childassembly is only vmvalid for instance. It can not be referenced in other new instances.

Registration syntactic sugar

VueRegistration on a global and local registration provides a shorthand method, you can also define component registration, the Vueinterior will automatically call the extendmethod for constructing components.

Interpretation of the Vue Source Component Component Registration

// 全局注册
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'
                }
            }
        },
    }
})

Use components

In the registration component, but also a custom label declares that the component name. In Vueusing the component name where the template needs to be called as a custom label directly calling component.

<My-Child></My-Child>

Precautions:

The difference between the option

const MyChild = Vue.extend(option)
const vm = new Vue(option)

must be a function of data
because the component is reusable, if the data module is a direct reference to an object, that multiplexing of multiple components share an object, wherein the object properties modifying a component, the other components of the reference object property the value will also change, which I do not want to see. The value returned by a function, will be achieved independent of each component of the data object.
Click to view an example of the official explanation

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'
                }
            }
        },
    }
})

Precautions DOM parsing template

Some HTML elements, such as <ul>, <ol>, <table>and <select>for which elements can appear inside is strictly limited. And some elements, such as <li>, <tr>and <option>can only occur within certain other specific elements.

This can cause some problems when we use these elements have constraints. E.g:

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

The custom component It will be promoted as an invalid content to the outside, and the results led to the final rendering error. Fortunately, this particular is characteristic gives us an alternative way:

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

Note that if we use a template from the following sources, then this restriction does not exist:

String templates (e.g.: template: '...')
Single-file assembly (.vue)
<script type="text/x-template">
vue get template content of N ways, Click here

Naming components

Official component naming style guide

Use PascalCase in JS domain, using the kebab-case template field in the DOM
Beginning with the parent component or a higher level of words, semantic complete words

Because HTML is not case sensitive, you must use the kebab-case template in the DOM

In JavaScript, and the class PascalCase constructor (no more than what can be produced essentially different instances) naming convention, may have multiple components Vue example, it makes sense to use the same PascalCase.

Click to view 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