如何通过template与非template方式注册组件,本文将给与详细代码案例并且博主亲测可用,vue组件(component)使用方式实例:
1. 不使用template标签
<body>
<divid="a">
<aaam="a++"bgcolor="red"></aaa>
<aaam="b--"bgcolor="blue"></aaa>
</div>
</body>
<script>
Vue.component('aaa', {
template: '<div><p>{{ m }}</p><p @click="add" :style="style">点这里-> a:{{a}} b:{{b}}</p></div>',
data: function() {
return {
a: 0,
b: 0,
style: {
fontSize: '30px',
background: this.bgcolor
}
}
},
props: ['m', 'bgcolor'],
methods: {
add: function() {
this.a++;
this.b--;
}
}
});
new Vue({
el: '#a'
})
</script>
2.使用template标签
<body>
<divid="a">
<aaam="a++"bgcolor="red"></aaa>
<aaam="b--"bgcolor="blue"></aaa>
</div>
<templateid="b">
<div>
<p>{{ m }}</p>
<p@click="add" :style="style">点这里->a:{{a}} b:{{b}}</p>
</div>
</template>
</body>
<script>
Vue.component('aaa', {
template: '#b',
data: function() {
return {
a: 0,
b: 0,
style: {
fontSize: '30px',
background: this.bgcolor
}
}
},
props: ['m', 'bgcolor'],
methods: {
add: function() {
this.a++;
this.b--;
}
}
});
new Vue({
el: '#a'
})
</script>
爱一点爱生活,一点技术分享。
