微客导航 » 文章资讯 » Vue自定义组件的四种方式示例详解

Vue自定义组件的四种方式示例详解

2023-07-31 11:44:04 182

四种组件定义方式都存在以下共性(血泪史)

规则：

1.组件只能有一个根标签

2.记住两个词全局和局部

3.组件名称命名中‘-小写字母'相当于大写英文字母(hello-com相当于helloCom)

而对于在HTML中自定义组件的时候有4种写法，不过也只是殊途同归，都是用template属性对应的只有一个根标签的HTML代码。

1.全局组件

定义方式示例：

Vue.component("hello-component",{
props:["message"],
template:"组件定义之全局组件
{{message}}"
});

使用

属性介绍：

Vue.componen()是vue.js内部封装方法
"hello-component"是使用时候的组件名称
props组件内的属性。供给组件内部传值
template组件内部DOM元素组成

品鉴

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

2.局部组件

定义方式示例：

varlimitComponent={
props:["message"],
template:"{{message}}
"
}
newVue({
el:"#app",
components:{
"child-component":limitComponent
}
});

使用

属性介绍：

el是Vue实例的挂载目标
"components"是注册仅在其作用域中可用的组件
"child-component"组件的名称(书写规则请上翻再看规则)
limitComponent通过对象方式传递组件

品鉴

3.Script方式注册组件

定义方式示例：



自定义组件之script方式定义
{{message}}

使用

属性介绍：

为定义组件的一种写法，type还可以取的值还可以有：

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代码。将的XX赋值给局部组件或者全局组件都可。

使用

属性介绍：

组件定义之全局组件