一个组件的 data 选项必须是一个函数,因此每个实例可以维护一份被返回对象的独立的拷贝
<div id="app">
<my-button></my-button>
</div>
<script>
Vue.component('my-button', {
template: '<button @click="count++">{{ msg }} {{ count }}</button>'
,data: function () {
return {
count: 0,
msg: '点我啊'
}
}
})
let vm = new Vue({
el: '#app'
,data: {
msg: 'liang'
}
})
</script>
错误示例
正确示例
<div id="app">
<my-button></my-button>
</div>
<script>
Vue.component('my-button', {
template: `
<ul>
<li>1</li>
<li>2</li>
</ul>
`
})
let vm = new Vue({
el: '#app'
,data: {
msg: 'liang'
}
})
</script>
components 属性
<div id="app">
<my-span></my-span>
</div>
<script>
var mySpan = {
template: '<p>12345</p>'
,data: function(){
return {
}
}
}
let vm = new Vue({
el: '#app'
,data: {
msg: 'liang'
}
,components: {
'my-span': mySpan
}
})
</script>