vue中組件的四種方法總結
阿新 • • 發佈：2017-09-17
end bsp nbsp 四種 temp recommend show -s com
希望對大家有用
全局組件的第一種寫法
html:<div id = "app">js：
<show></show>
</div>
第一步：實例化Vue對象
var app = new Vue({
el:"#app"
})
第二步:定義組件
var myComponent = Vue.extend({
template: ‘<h1>vue全局組件寫法一</h1>‘
});
第三步：註冊組件 Vue.component(‘show‘,myComponent)<div id="app1">js:
<login></login>
</div>
Vue.component(‘login‘,{
template: ‘<h1>vue全局組件寫法二</h1>‘
});
var app1 = new Vue({
el:"#app1"
});
全局組件的第三種方法
html:
<template id="recommend">js:
<h1>這種方法比較推薦</h1></template>
<div id="app3">
<recommend></recommend>
</div>
Vue.component(‘recommend‘,{
template:‘#recommend‘
})
var app3 = new Vue({
el:"#app3"
});
全局組件第四種寫法（不太推薦）
html
<script type="x-template" id="recommend1">js
<h1>這種方法不太推薦</h1></script>
<div id="app4">
<recommend1></recommend1>
</div>
Vue.component(‘recommend1‘,{
template:‘#recommend1‘
})
var app13 = new Vue({
el:"#app4"
});
vue中組件的四種方法總結