非单文件组件 | go0d1uck's Blog

Vue中使用组件的三大步骤

定义组件(创建组件)

使用Vue.extend(options)创建，其中options和new Vue(options)时传入的options几乎一样，但也有点区别；
区别如下：
1.el不要写，为什么？
　　—— 最终所有的组件都要经过一个vm的管理，由vm中的el决定服务哪个容器。
2.data必须写成函数，为什么？
　　—— 避免组件被复用时，数据存在引用关系。
备注：使用template可以配置组件结构。

const hello = Vue.extend({
    template:`
        <div>
            <h2>你好啊！{{name}}</h2>
        </div>
    `,
    data(){
        return {
            name:'Tom'
        }
    }
})

注册组件

局部注册

new Vue的时候传入components选项

new Vue({
    el:'#root',
    data:{
        ...
    },
    //局部注册
    components:{
        hello
    }
})

全局注册

Vue.component('组件名',组件)

1	Vue.component('hello',hello)

使用组件(写组件标签)

<hello></hello>
或
<hello />

几个注意点

关于组件名

一个单词组成：
　　第一种写法（首字母小写）：school
　　第二种写法（首字母大写）：School
多个单词组成：
　　第一种写法（kebab-case命名）：my-school
　　第二种写法（CamelCase命名）：MySchool (需要Vue脚手架支持)
备注：
　　1.组件名尽可能回避HTML中已有的元素名称，例如：h2、H2都不行。
　　2.可以使用name配置项指定组件在开发者工具中呈现的名字。