vue學習筆記3 元件

2021-08-20 06:19:22 字數 2032 閱讀 6298

1、元件命名

a.全小寫加連線符

vue.component('my-component-name', )
當使用 kebab-case (短橫線分隔命名) 定義乙個元件時,你也必須在引用這個自定義元素時使用 kebab-case,例如

b、駝峰式

vue.component('mycomponentname', )
當使用 pascalcase (駝峰式命名) 定義乙個元件時,你在引用這個自定義元素時兩種命名法都可以使用。也就是說都是可接受的。注意,儘管如此,直接在 dom (即非字串的模板)

中使用時只有 kebab-case 是有效的

2、全域性註冊和區域性註冊

全域性註冊: 註冊後,可以在任何新建立的根vue例項中使用。

區域性註冊--components屬性

1、普通的js物件

2、babel和webpack,單檔案元件 ,工程實踐中主要使用這種

props

在註冊元件中屬性使用駝峰式,html中應採用kebab-case,字串模板和單檔案元件仍然按定義的來。

傳入 靜態的數字,布林值,陣列,物件, 用v-bind即可。

v-bind:comments="">

blog-post>

v-bind:post="post">

blog-post>

另外物件所有屬性傳入可簡寫:

post:

下面的模板:

<

blog-post

v-bind="post"

>

blog-post>

等價於:

v-bind:id="post.id"

v-bind:title="post.title"

>

blog-post>

屬性可以自定義驗證

vue.component('my-component', ,

// 帶有預設值的數字

propd: ,

// 帶有預設值的物件

prope: }},

// 自定義驗證函式

propf: }}

})

使用元件時傳了未定義的屬性,會被自動轉移到元件的根元素上。

使用時傳入的普通屬性會覆蓋根原有屬性,style 和class 會合併。

元件屬性繼承禁用

vue.component('my-component', )

//todo      add .............................................

v-bind=」$attrs」, 將父元件中不被認為 props特性繫結的屬性傳入子元件中

,通常配合 interitattrs 選項一起使用

自定義事件:

內容分發api ----插槽 slot

Vue學習筆記 七 元件

在正式開始講解元件之前,我們先來看乙個簡單的例子 下面我們詳細解讀一下上面這份 vue.component button counter template times 我們首先通過全域性方法vue.component 建立了乙個名為 button counter 的全域性元件 該方法的第乙個引數是元...

Vue入門3 元件

1 區域性元件 元件的定義模式可以直接在程式裡面採用html字串的方式進行定義,先進行乙個區域性元件的定義,所謂區域性元件指的是針對於某個vue物件定義的。js el msgdiv components html 執行結果 2 全域性元件 以上所定義的元件只能夠在當前vue物件使用,所以按照習慣性的...

Vue學習筆記 6 元件註冊

3.基礎元件的自動化全域性註冊 我們前一篇提到了元件註冊,但是那裡用的是我們的全域性註冊。註冊分為區域性註冊和全域性註冊 下面開始講解 lang en charset utf 8 titletitle src script head v for i in names v bind value i x...