Vue学习笔记 - 组件化开发 - 组件基础

组件化开发思想

• 标准：统一的标准规范
• 分治：不同功能封装到不同组件
• 重用：代码重用提高效率
• 组合：组件组合形成产品

组件基本使用

组件的创建与使用

创建一个组件：

// 定义一个名为 button-counter 的全局组件
Vue.component('button-counter', {
    data: function() {
        return {
            count: 0
        }
    },
    template: `
    <div>
        <button @click="countAdd">{{count}}次</button>
        <button>测试</button>
    </div>
    `,
    methods: {
        countAdd: function(){
            this.count++;
        }
    }
});

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

组件使用：

<div id='app'>
    <button-counter></button-counter>
</div>

注意事项

1、data必须是一个函数

组件里的data必须是一个函数，不允许定义为对象。 使用函数可以形成一个闭包环境，可以保证每一个组件都拥有一份独立的数据。

2、组件模板内容必须是单个根元素

必须包起来

3、组件的名字推荐短横线

如果组件名是驼峰式的，使用组件时只能在字符串模板中使用驼峰形式，但是在普通的标签模板中，必须使用短横线的方式使用组件。

局部组件

局部组件创建：

let HelloWorld = {
    data: function() {
        return {
            msg: 'HelloWorld'
        }
    },
    template: `<div>{{msg}}</div>`
};
let HelloTom = {
    data: function() {
        return {
            msg: 'HelloTom'
        }
    },
    template: `<div>{{msg}}</div>`
};

var vm = new Vue({
    el: '#app',
    data: {
    },
    components: {
        'hello-world': HelloWorld,
        'hello-tom': HelloTom
    }
})

局部组件使用：

<div id='app'>
    <hello-world></hello-world>
    <hello-tom></hello-tom>
</div>