Vue组件的data必须是一个函数、单个根元素、局部组件
2023-06-13 09:17:02 时间
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>
相关文章
- vue组件——富文本编辑器
- 用vue实现入库单的打印「建议收藏」
- Vue父组件向子组件传值简单示例「建议收藏」
- Vue组件
- vue ajax 修改初始化赋值
- 如何在vue项目中使用md5加密
- vue动态生成表单_vue element 表单验证
- vue.js 渲染函数_Vue.js的不可渲染且可扩展的RTF编辑器[通俗易懂]
- 在 Vue 中,使用 $attrs 构建高级组件
- 「后端小伙伴来学前端了」Vue中利用全局事件总线实现组件之间通信
- vue页面刷新_vue强制重置组件
- vue使用富文本编辑器tynimce并实现图片上传_富文本编辑器有什么用
- 什么样的vue面试题答案才是面试官满意的
- vue 父组件调用子组件的函数_vue子组件触发父组件方法
- vue 调用子组件方法失败_Vue子组件调用父组件的方法及常见问题「建议收藏」
- vue组件间通信
- vue中父组件传值给子组件,父组件值改变,子组件不能重新渲染[通俗易懂]
- Vue调试工具安装(vue devtools)
- 【架构师(第三十篇)】Vue-Test-Utils 全局组件和第三方库 vuex | vue-router
- uniapp或vue项目里如何接入第三方在线客服代码
- vue页面跳转
- Vue组件设计学习笔记,持续记录
- 每日一题之Vue的异步更新实现原理是怎样的?_2023-02-23
- Vue提示框组件vue-notification使用实例演示
- vue核心面试题:组件中的data为什么是一个函数
- linux下快速部署Vue项目(linux部署vue)
- Vue接入Redis拓展应用的可能性(vue调redis)