全域性元件
全域性元件註冊語法
components中的兩個引數元件名稱和元件內容
vue.component(元件名稱, )
全域性元件註冊應用
元件建立:
vue.component('button-counter',},template: '點選了}次',
methods: }})
var vm = new
vue(
});
如何在頁面中運用,直接在頁面中應用元件名稱
這個元件是可以重用的,直接在頁面中多次使用,切資料相互獨立,互不干擾
元件註冊注意事項
data必須是乙個函式
元件模板內容必須是單個根元素
元件模板內容可以是模板字串
元件命名方式
vue.component('my-component',)
vue.component('mycomponent',)
如果使用駝峰式命名元件,那麼在使用元件的時候,只能在字串模板中用駝峰的方式使用元件,但是在普通的標籤模板中,必須使用短橫線的方式使用元件
區域性元件
區域性元件只能在註冊它的父元件中使用
區域性元件註冊語法
var componenta =var componentb =
var componentc =
newvue(
})
元件的建立
vue.component('test-com',);var helloworld =
},template: '}
'};
var hellotom =
},template: '}
'};
var hellojerry =
},template: '}
'};
var vm = new
vue(,
components:
});
頁面中的應用
Vue元件註冊
方式一 vue.component my component name 方式二 vue.component mycomponentname 方式一 在dom中可以直接用,是有效的元素 方式二 可用在單檔案元件中 single file component 元件註冊後,可在全域性使用,並且全域性元件之...
vue元件註冊
我們會在多個頁面使用button,每個頁面寫起來很麻煩,如果想把它做成乙個公用元件,使用時直接呼叫會比較方便。現在建立了乙個元件button.vue。找到main.js檔案,然後輸入如下 import button from components button.vue vue.component m...
vue註冊元件
下面是建立乙個新的構造器,元件構造器 const hello vue.extend my hello元件註冊,第二個引數傳入的是擴充套件的構造器 vue.component my hello hello my world元件註冊,第二個引數傳入的是選項物件 vue.component my worl...