這次帶給大家Vue.js元件的使用方法,Vue.js元件所使用的注意事項有哪些,以下就是實戰案例,一起來看一下。
1. 所有Vue元件同時也都是Vue實例,分為全域元件和局部元件,註冊方式如下。
<p id="app">
<my-component></my-component>
<child-component></child-component></p><p id="example">
<my-component></my-component>
<!--在#app内局部注册的组件在此无法被渲染 -->
<child-component></child-component></p><script src="https://cdn.jsdelivr.net/npm/vue"></script><script>Vue.component('my-component', { //全局组件,建议使用短横线分隔式命名组件 template: '<p>A custom component!</p>'})var Child = {
template: '<p>A child component!</p>'}var app = new Vue({
el: '#app',
components: { //局部组件,仅可在父作用域#app中使用
'child-component':Child
}
})var example = new Vue({
el:'#example'})</script>
登入後複製
注意:
a. 如
、和- 、
等父子元素有限制的元素,不能直接使用元件模板,可由is屬性來指定,如
。若使用來自下列來源之一的字串範本(允許嵌入表達式的字串字面量),則沒有這些限制:
1)
2) JavaScript 內聯範本字串: ## 3).元件
b. 元件實例中data 必須是函數,否則會給每個元件實例傳回對同一個物件的參考
2. 父子元件組合使用
# a. 父元件傳遞資料給子元件
1) 在子元件中由props宣告預期資料。
2) 屬於單向資料流,子元件不能直接修改prop。
3) 若要設定prop類型驗證,則不能用字串數組,應定義:
#Vue.component('component1',{
template: '<tr><td>child component</td></tr>'
});
Vue.component('component2',{
template: '<table><component1></component1></table>'
});
登入後複製
#props:{
propA: Number,
propB: [String, Number]
}
登入後複製
4) 若要新增非propprop屬性,則在使用子元件元件時,標籤時中設定該屬性="true"。
b. 子元件觸發父元件事件
1) 利用 $on(eventName) 監聽事件和 $emit(eventName,optionalPayload) ##$emit(eventName,optionalPayload)
##觸發事件。 2) 結合定義的空實例,也可允許非父子元件的通訊。 c. 父子元件資料組合--利用插槽slot 1) 子元件中設定,父元件可分發內容至預設slot或指定slot="slotName" 。 2) 父元件中設定slot-scope="props",可取得子元件slot標籤的屬性。 3) 需注意父元件範本的內容在父元件作用域內編譯;子元件範本的內容在子元件作用域內編譯。 3. 其他 a. 透過 v-bind:is = "componentObject",可動態切換元件。若要緩存切出去的元件,則為其添加父元素。 b. 在子元件中設定 ref="xx" ,可由 child = vm.$refs.xx 運算子元件。 -- 只是一種緊急手段。 我相信看了本文案例你已經掌握了方法,更多精彩請關注php中文網其它相關文章! 推薦閱讀:JavaScript的字串怎麼使用
#微信小程式怎麼實作資料雙向綁定
###以上是Vue.js元件的使用方法的詳細內容。更多資訊請關注PHP中文網其他相關文章!
本網站聲明
本文內容由網友自願投稿,版權歸原作者所有。本站不承擔相應的法律責任。如發現涉嫌抄襲或侵權的內容,請聯絡admin@php.cn
作者最新文章
-
2018-06-11 11:57:34
-
2018-06-15 15:55:18
-
2018-06-15 15:49:00
-
2018-06-15 15:46:15
-
2018-06-15 15:42:38
-
2018-06-15 15:40:34
-
2018-06-15 15:39:32
-
2018-06-15 15:37:14
-
2018-06-15 15:34:21
-
2018-06-15 15:22:51