使用组件时,大多数可以传入到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>