vue中組件的四種方法總結

希望對大家有用

全局組件的第一種寫法

html:

<div id = "app">
    <show></show>
</div>

js：

  第一步：實例化Vue對象
    var app = new Vue({
        el:"#app"
    })

    第二步:定義組件
    var myComponent = Vue.extend({
        template: '<h1>vue全局組件寫法一</h1>'
    });

    第三步：注冊組件   Vue.component('show',myComponent)

全局組件的第二種寫法(注意定義的組件必須在實例化前面)

html:

<div id="app1">
    <login></login>
</div>

js:

Vue.component('login',{
    template: '<h1>vue全局組件寫法二</h1>'
});
var app1 = new Vue({
    el:"#app1"
});

全局組件的第三種方法

html:

<template id="recommend">
    <h1>這種方法比較推薦</h1>
</template>
<div id="app3">
    <recommend></recommend>
</div>

js:

Vue.component('recommend',{
    template:'#recommend'
})
var app3 = new Vue({
    el:"#app3"
});

全局組件第四種寫法（不太推薦）

html    

<script type="x-template" id="recommend1">
    <h1>這種方法不太推薦</h1>
</script>
<div id="app4">
    <recommend1></recommend1>
</div>

js

Vue.component('recommend1',{
    template:'#recommend1'
})
var app13 = new Vue({
    el:"#app4"
});