1 定义第一个组件

Vue.js 组件需要注册后才可以使用，注册分为全局注册和局部注册。全局注册后，任何 vue 实例都可以用这个组件。

html：

<div id="app">
    <deniro-component></deniro-component>
</div>

js：

Vue.component('deniro-component',{
    template:'<div>亚马逊一统美国电商天下？你想多了</div>'
});

var app = new Vue({
    el: '#app',
    data: {}
});

component 的第一个参数是组件名称，建议使用小写减号的风格来命名组件。
要使用这个自定义组件，必须在创建实例前先注册这个组件。
template 必须是一个DOM 结构，这样才能被正确渲染。

输出结果：

<div id="app"><div>亚马逊一统美国电商天下？你想多了</div></div>

2 局部注册

使用 Vue 实例中的 components 属性可以局部注册组件，通过这种方式注册后的组件，只有在该实例的作用域下才是有效的。

html：

<div id="app2">
    <deniro-component></deniro-component>
</div>

js：

var child = {
    template: '<div>亚马逊一统美国电商天下？你想多了</div>'
};
var app2 = new Vue({
    el: '#app2',
    components: {
        'deniro-component': child
    }
});

渲染效果与上例相同。

3 摆脱 HTML 限制

组件中定义的模板，在某些情况下，是会受到 HTML 限制的。比如 <table> 内规定只允许出现 <tr>、<td> 以及 <th> 等表格元素，还有 <ul>、<ol>、<select> 等元素也有类似的限制。在这种情况下，我们可以使用 is 属性来挂载组件。

html：

<div id="app3">
    <table>
        <tbody is="deniro-component"></tbody>
    </table>
</div>

js：

Vue.component('deniro-component', {
    template: '<div>亚马逊一统美国电商天下？你想多了</div>'
});

var app3 = new Vue({
    el: '#app3',
    data: {}
});

渲染结果：

<div id="app3"><table><div>亚马逊一统美国电商天下？你想多了</div></table></div>

注意：这里如果使用常规方法来使用组件，那么模板中的内容将在 <table> 之外！

html：

<table>
    <tbody><deniro-component></deniro-component></tbody>
</table>

渲染结果：

<div id="app3"><div>亚马逊一统美国电商天下？你想多了</div><table><tbody></tbody></table></div>

注意：如果使用的是字符串模板，那么是不受 HTML 限制的。

4 组件中的 data

Vue.js 组件中的 data 必须是函数（Vue.js 实例中的 data 是对象）。

html：

<div id="app4">
    <deniro-component4></deniro-component4>
</div>

js：

Vue.component('deniro-component4', {
    template: '<div>{{content}}</div>',
    data: function () {
        return {
            content: '优信淘宝达成战略合作，共建二手车在线交易商城'
        }
    }
});
var app4 = new Vue({
    el: '#app4'
});

渲染结果：

<div id="app4"><div>优信淘宝达成战略合作，共建二手车在线交易商城</div></div>

data 定义的函数，如果 return 的是一个外部对象，而这个对象又被多个组件所引用，那么任何一个组件修改了这个对象的值，其它组件都会受到影响。

html：

<div id="app5">
    <deniro-component5></deniro-component5>
    <deniro-component5></deniro-component5>
    <deniro-component5></deniro-component5>
</div>

js：

var data = {
    counter: 0
};

Vue.component('deniro-component5', {
    template: '<button @click="counter++">{{counter}}</button>',
    data: function () {
        return data;
    }
});

var app5 = new Vue({
    el: '#app5'
});

效果：

为了避免这个问题，我们必须在 data 中返回一个新的对象。

html：

<div id="app6">
    <deniro-component6></deniro-component6>
    <deniro-component6></deniro-component6>
    <deniro-component6></deniro-component6>
</div>

js：

Vue.component('deniro-component6', {
    template: '<button @click="counter++">{{counter}}</button>',
    data: function () {
        return {
            counter: 0
        };
    }
});

var app6 = new Vue({
    el: '#app6'
});

这样的组件就可以复用啦O(∩_∩)O~

以上示例 DEMO

最后编辑于：2018.12.07 19:38:46