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

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

成都创新互联主要从事成都网站制作、做网站、网页设计、企业做网站、公司建网站等业务。立足成都服务淮滨,10多年网站建设经验,价格优惠、服务专业,欢迎来电咨询建站服务:18982081108

规则:

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.局部组件

定义方式示例:

var limitComponent = {
  props:["message"],
  template :"

{{message}}

" } new Vue ({ el : "#app", components :{ "child-component": limitComponent } });

使用

属性介绍:

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

品鉴

  • 你不必把每个组件都注册到全局。你可以通过某个 Vue 实例/组件的实例选项 components 注册仅在其作用域中可用的组件。
  • js中用反斜线“\”'实现字符串换行

3.Script方式注册组件

定义方式示例:




使用

属性介绍:

使用

属性介绍: