vue自定义组件是.vue还是html,Vue.js 自定义组件的 四种方式

1.全局组件

定义方式示例：

Vue.component("hello-component", {

props: ["message"],

template: "

组件定义之全局组件

{{message}}

"

});

使用：

属性介绍：

Vue.component()：是vue.js内部封装方法

"hello-component"：是使用时候的组件名称

props：组件内的属性，供给组件内部传值

template：组件内部DOM元素组成

全局组件定义方式，是直接给全局对象Vue注册了一个组件。在本页内已挂载Vue 实例的DOM目标元素 都可以使用(区别于局部组件只能是挂载哪一个DOM，哪个才能使用)。

2.局部组件

定义方式示例：

var limitComponent = {

props: ["message"],

template: "

{{message}}

type='text' v-model='message'>

"

}

new Vue ({

el: "#app",

components: {

"child-component": limitComponent

}

});

使用：

属性介绍：

el：是 Vue 实例的挂载目标

"components"：是注册仅在其作用域中可用的组件

"child-component"：组件的名称(书写规则请上翻再看规则)

limitComponent：通过对象方式传递组件

你不必把每个组件都注册到全局。你可以通过某个 Vue 实例/组件的实例选项 components 注册仅在其作用域中可用的组件；

js中用反斜线“\”实现字符串换行；

3.Script方式注册组件

定义方式示例：

自定义组件之script方式定义

{{message}}

Vue.component("mymac", {

props: ["message"],

template: "#script-component"

})

var newVue = new Vue({

el: "#mac",

data: {

mydata: "春暖花开"

}

});

使用：

属性介绍：

text/javascript：说明这一段脚本语言是javascript。告诉浏览器这一段要按照javascript来解释执行。在ES5之前的type默认值

text/ecmascript：JavaScript和ECMAScript是相同的，只是在名称上是不同的。但是对于ecmascript-6而言就可以理解是JS的新语法特性。即HTML5中的默认值

application/ecmascript：ie6、7、8都是没法识别里面的js语句的

application/javascript：这个属性在IE8以下的浏览器中无法被识别。

text/vbscript：表示该脚本语言是vb脚本

Script定义组件方式笔者觉得就是组件定义方式的另一种写法。优点在于不用写字符串式HTML代码。将

4.创建组件

定义方式示例：

{{message}}

Vue.component('templatec', {

props: ["message"],

template: "#cc"

})

new Vue({

el: "#MyTemp"

})

使用：

属性介绍：

为HTML5发布后用来声明是“模板元素”的标签。即HTML5之前使用

定义组件的方式实际是HTML语法升级后的

参考：