VUE参考---组件中的data和methods
一、总结
一句话总结：
组件中可以有自己的data和methods，data的话必须是函数且返回对象，方法的话则和vue对象里面一样，data和methods使用的话和vue实例中一样。
Vue.component('mycom1', { template: '<h1>这是全局组件 --- {{msg}}</h1>', data: function () { return { msg: '这是组件的中data定义的数据' } } })
1、组件中的data注意？
组件中的 data 除了必须为一个方法之外,这个方法内部,还必须返回一个对象才行
Vue.component('mycom1', { template: '<h1>这是全局组件 --- {{msg}}</h1>', data: function () { return { msg: '这是组件的中data定义的数据' } } })
二、组件中的data和methods
博客对应课程的视频位置：
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 <script src="./lib/vue-2.4.0.js"></script> 10 </head> 11 12 <body> 13 <div id="app"> 14 <mycom1></mycom1> 15 </div> 16 17 <script> 18 // 1. 组件可以有自己的 data 数据 19 // 2. 组件的 data 和 实例的 data 有点不一样,实例中的 data 可以为一个对象,但是 组件中的 data 必须是一个方法 20 // 3. 组件中的 data 除了必须为一个方法之外,这个方法内部,还必须返回一个对象才行; 21 // 4. 组件中 的data 数据,使用方式,和实例中的 data 使用方式完全一样!!! 22 Vue.component('mycom1', { 23 template: '<h1>这是全局组件 --- {{msg}}</h1>', 24 data: function () { 25 return { 26 msg: '这是组件的中data定义的数据' 27 } 28 } 29 }) 30 31 // 创建 Vue 实例，得到 ViewModel 32 var vm = new Vue({ 33 el: '#app', 34 data: {}, 35 methods: {} 36 }); 37 </script> 38 </body> 39 40 </html>