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...