第六章组件 56 组件-组件中的data

 1 <!DOCTYPE html>
 2 <html lang="en">
 3 
 4   <head>
 5     <meta charset="utf-8">
 6     <meta name="viewport" content="width=device-width,initial-scale=1.0">
 7     <meta http-equiv="X-UA-Compatible"  content="ie=edge">
 8     <title>Document</title>
 9     <!--1.导入Vue的包-->
10     <script src=" https://cdn.jsdelivr.net/npm/vue"></script>   
11   </head>
12 
13   <body>
14       <div id="app">
15       <mycom1></mycom1>
16       </div>
17 
18       <script>
19       // 1.组件可以有自己的 data 数据
20       // 2.组件的 data 和实例的data 有点不一样，实例中的data 可以为一个对象，但是 组件中的data 必须是一个方法
21       //3.组件中 的data 除了必须为一个方法之外，这个方法内部，还必须返回一个对象才行
22       //4.组件中的data数据，使用方式，和实例中的data 使用方式完全一样！！！
23       Vue.component('mycom1',{
24         template:'<h1>这是全局组件---{{msg}}</h1>',
25         data:function(){
26           return{
27             msg:'这是组件中data定义的数据'
28           }
29         }
30       })
31           //创建 Vue 实例，得到 ViewModel
32           var vm =  new Vue({
33               el:'#app',
34         data:{
35           msg:''
36         },
37         methods:{}
38           });
39       </script>
40   </body>
41 </html>

posted on 2019-06-10 15:45 songsong_p_blue 阅读(198) 评论(0) 收藏举报

第六章 组件 56 组件-组件中的data

第六章组件 56 组件-组件中的data