Vue的data选项使用注意
使用组件时,大多数可以传入到Vue构造器中的选项可以在Vue extend()
或 Vue.component() 中注册组件时使用,
但是有一个重要的前提:data必须是函数
1 1.在 var vm = new Vue({ 2 el:'#app', 3 daa:{} 4 })中的data是用来存放数据的,是一个对象 5 6 2.在Vue.component({})里面 7 或在: 8 let profile = Vue.extend({ 9 template:`` 10 })里面data必须是 一个函数,不能是对象
1 <!DOCTYPE html> 2 <html lang="en"> 3 <head> 4 <meta charset="UTF-8"> 5 <title>Title</title> 6 <script src="../../vue.js"></script> 7 </head> 8 <body> 9 10 <div id="app"> 11 <vue-div></vue-div> 12 </div> 13 </body> 14 <script type="text/template" id="vue-div"> 15 <div> 16 <p>{{message}}</p> 17 </div> 18 </script> 19 <script> 20 //1.实例化组件(实例化组件要写在vm视图前面,否则报错) 21 Vue.component('vue-div',{ 22 template:'#vue-div', 23 // data:{ 错误写法, 24 // message:'西门吹雪' //报错信息:vue.js:597 [Vue warn]: The "data" option should be a function that returns a per-instance value in component definitions 25 // } 26 data(){ //正确写法 27 return{ 28 message:'西门吹雪' 29 } 30 } 31 }); 32 33 var vm = new Vue({ 34 el:'#app', 35 data:{} 36 }); 37 38 39 </script> 40 </html>
【推荐】编程新体验,更懂你的AI,立即体验豆包MarsCode编程助手
【推荐】凌霞软件回馈社区,博客园 & 1Panel & Halo 联合会员上线
【推荐】抖音旗下AI助手豆包,你的智能百科全书,全免费不限次数
【推荐】博客园社区专享云产品让利特惠,阿里云新客6.5折上折
【推荐】轻量又高性能的 SSH 工具 IShell:AI 加持,快人一步