Vue 元件的使用

2021-10-07 03:58:00 字數 784 閱讀 5135

使用 kebab-case

vue.

component

('my-component-name'

,)

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

使用 pascalcase

vue.component('mycomponentname', )
當使用 pascalcase (首字母大寫命名) 定義乙個元件時,你在引用這個自定義元素時兩種命名法都可以使用。也就是說 和 都是可接受的。注意,儘管如此,直接在 dom (即非字串的模板) 中使用時只有 kebab-case 是有效的。

全域性註冊使用

"components-demo"

>

>

button-counter

>

>

button-counter

>

>

button-counter

>

div>

// 定義乙個名為 button-counter 的新元件

vue.

component

('button-counter',}

, template:

'you clicked me } times.'})

newvue

()

Vue元件的使用

元件是可復用的 vue 例項,如果網頁中的某乙個部分需要在多個場景中使用,那麼我們可以將其抽出為乙個元件進行復用。元件大大提高了 的復用率。一 全域性註冊 vue.component componentnew 第乙個引數為元件名,第二個引數為配置項,是乙個物件的結構。全域性註冊的元件可以用在任何新建...

vue 元件及動態元件使用

在註冊乙個元件的時候,我們始終需要給它乙個名字,該元件名就是vue.component的第乙個引數。元件命規則 1 使用 kebab case vue.component my component name 當使用 kebab case 短橫線分隔命名 定義乙個元件時,你也必須在引用這個自定義元素時...

Vue元件使用基礎

這篇博文用來記錄.vue元件的使用方法。可以把元件 按照template style script的拆分方式,放置到對應的.vue檔案中。模板 template 初始資料 data 接受的外部引數 props 方法 methods 生命週期鉤子函式 lifecycle hooks 在html中使用元...