Vue组件的data必须是一个函数、单个根元素、局部组件

很酷的站长

发布于 2023-02-17 11:39:40

7190

文章被收录于专栏：站长的编程笔记站长的编程笔记

1.Vue组件的data必须是一个函数

参考官网文档

一个组件的 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>

2. 每个组件必须只有一个根元素

参考官方文档

错误示例

正确示例

<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>

3. 注册局部组件

components 属性

my-span 组件名
mySpan 组件模板存放变量

<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>

本文参与腾讯云自媒体同步曝光计划，分享自作者个人站点/博客。

如有侵权请联系 cloudcommunity@tencent.com 删除

components