Vue.js元件的使用方法

這次帶給大家Vue.js元件的使用方法，Vue.js元件所使用的注意事項有哪些，以下就是實戰案例，一起來看一下。

　　1. 所有Vue元件同時也都是Vue實例，分為全域元件和局部元件，註冊方式如下。

2fb1ec095997abb5abb99340125c8b3b
    b98f2d1b8b5d79f8c1b053de334aa7b583153a5025b2246e72401680bb5dd683
    6520631531c208a38051e59cee36c27853b801b01e70268453ed301cb998e90c94b3e26ee717c64999d7867364b1b4a3dbe41635306b450881218e857817dde0
    b98f2d1b8b5d79f8c1b053de334aa7b583153a5025b2246e72401680bb5dd683
    8c69b8c7e69a6890c44e58d7de1f3c9c
    6520631531c208a38051e59cee36c27853b801b01e70268453ed301cb998e90c94b3e26ee717c64999d7867364b1b4a3a95778579e16b0726f139f43cb421b7b2cacc6d41bbb37262a98f745aa00fbf03f1c4e4b6b16bbbd69b2ee476dc4f83aVue.component('my-component', { //全局组件，建议使用短横线分隔式命名组件  template: 'e388a4556c0f65e1904146cc1a846beeA custom component!94b3e26ee717c64999d7867364b1b4a3'})var Child = {
    template: 'e388a4556c0f65e1904146cc1a846beeA child component!94b3e26ee717c64999d7867364b1b4a3'}var app = new Vue({
    el: '#app',    
    components: { //局部组件，仅可在父作用域#app中使用
    'child-component':Child
    }　　
})var example = new Vue({
    el:'#example'})2cacc6d41bbb37262a98f745aa00fbf0

　　注意：

　　a. 如ff6d136ddc5fdfeffaf53ff6ee95f185、f5d188ed2c074f8b944552db028f98a1和25edfb22a4f469ecb59f1190150159c6、a34de1251f0d9fe1e645927f19a896e8等父子元素有限制的元素，不能直接使用元件模板，可由is屬性來指定，如aefc3baf03de7c3c7ca7059834a76d2bfd273fcf5bcad3dfdad3c41bd81ad3e5。若使用來自下列來源之一的字串範本（允許嵌入表達式的字串字面量），則沒有這些限制：

　　1) 504a63905e80b0689d69a3a31c4d4555

　　2) JavaScript 內聯範本字串:　　　　##　3).元件

　　b. 元件實例中data 必須是函數，否則會給每個元件實例傳回對同一個物件的參考

　　2. 父子元件組合使用

# a. 父元件傳遞資料給子元件

　　　　1) 在子元件中由props宣告預期資料。

　　　　2) 屬於單向資料流，子元件不能直接修改prop。

　　　　3) 若要設定prop類型驗證，則不能用字串數組，應定義:　　　　　

#

Vue.component('component1',{
    　　　　　　template: &#39;<tr><td>child component</td></tr>&#39;
　　　　});
　　　　Vue.component(&#39;component2&#39;,{
    　　　　　　template: &#39;<table><component1></component1></table>&#39;
　　　　});

　　　　　　

#

props:{
　　　　　　　　 propA: Number,
　　　　　　　　 propB: [String, Number]
　　　　　　}

　　　　4) 若要新增非propprop屬性，則在使用子元件元件時，標籤時中設定該屬性="true"。

　　b. 子元件觸發父元件事件

　　　　1) 利用 $on(eventName)  監聽事件和 $emit(eventName,optionalPayload) ##$emit(eventName,optionalPayload) 

##觸發事件。

　　　　2) 結合定義的空實例，也可允許非父子元件的通訊。

　　c. 父子元件資料組合--利用插槽slot

　　　　1) 子元件中設定58cb293b8600657fad49ec2c8d37b472，父元件可分發內容至預設slot或指定slot="slotName" 。

　　　　2) 父元件中設定slot-scope="props"，可​​取得子元件slot標籤的屬性。

　　　　3) 需注意父元件範本的內容在父元件作用域內編譯；子元件範本的內容在子元件作用域內編譯。

　　3. 其他

　　a. 透過 v-bind:is = "componentObject"，可動態切換元件。若要緩存切出去的元件，則為其添加父元素7c9485ff8c3cba5ae9343ed63c2dc3f7。

　　b. 在子元件中設定 ref="xx" ,可由 child = vm.$refs.xx 運算子元件。 -- 只是一種緊急手段。 

我相信看了本文案例你已經掌握了方法，更多精彩請關注php中文網其它相關文章！

推薦閱讀：

JavaScript的字串怎麼使用

#微信小程式怎麼實作資料雙向綁定

###

以上是Vue.js元件的使用方法的詳細內容。更多資訊請關注PHP中文網其他相關文章！