Vue全局注册组件的几种方式

Vue全局注册组件的几种方式

1、extend

vue.js 代码：

var com = Vue.extend({
   template:'<h1>这是第一种方式</h1>'
});
Vue.component("MyComponent",com);

此时的组件名为 “MyComponent” ，HTML文件中的代码是这样：

<MyComponent></MyComponent>

注：组件的命名规则有两种，可以为驼峰，即首字母大写；也可以字母全小写，在中间加 - ，即my-component

2、不要extend，直接写

vue.js 代码：

Vue.component("my-component",{
    template:'<h1>这是第二种方式</h1>'
});

HTML代码依旧和之前一样：

<my-component></my-component>

这是在js内部定义template，也可以在HTML页面中定义template，此时需要加上id 。

3、在页面上定义外部template元素

vue.js代码：

Vue.component("MyComponent",{
    template:'#qiao'
});

此时HTML页面的代码就变成了：

<template id="qiao">
    <h1>这是第三种方法</h1>
</template>

这是vue全局注册组件的几种方法，另外组件命名的时候，不能与vue本来就存在的关键词冲突；且不论是哪种方式创建出来的组件，必须只有一个根元素，即多个html元素的时候，要用一个div包裹。