组件意在 复用 , 若为 对象, 则会相互干扰. 且 Vue 不允许此事发生, 规定必须为函数, 否则报错. 原理如下

 

对象

// 模拟创建组件 
var Component= function() {} 
 
// 模拟使用对象作data 
Component.prototype.data = { a: 1 } 
 
// 模拟使用组件 
var component1 = new Component() 
var component2 = new Component() 
 
// 发现 data 共用, 相互影响 
component1.data.a = 2 
component2.data.a   // 2

 

函数

// 模拟创建组件 
var Component= function() {}; 
 
// 模拟使用函数作data 
Component.prototype.data = function() { return { a: 1 } }; 
 
// 模拟使用组件 
var component1 = new Component() 
var component2 = new Component() 
 
// 两者互不影响 
component1.data.a = 2 
component2.data.a // 1

 

发布评论
IT源码网

微信公众号号:IT虾米 (左侧二维码扫一扫)欢迎添加!

怎样在 Vue 里面使用自定义事件将子组件的数据传回给父组件讲解
你是第一个吃螃蟹的人
发表评论

◎欢迎参与讨论,请在这里发表您的看法、交流您的观点。