锐客网

  1. 首页 > it技术 > >

Vue.js之组件data的使用

官网链接：https://cn.vuejs.org/v2/guide/components.html
参考链接：http://www.cnblogs.com/keepfool/p/5625583.html
教学视频参考链接：
https://ke.qq.com/webcourse/index.html#cid=320654&term_id=100380571&taid=2520179435431054&vid=t1428m0ykhd
传入Vue构造器的多数选项也可以用在Vue.extend()或Vue.component()中。
Vue.js规定：在定义data选项时，必须使用函数
如果data选项指向某一个对象，这意味着所有的组件实例公用一个data。如下代码所示：

- 锐客网

【Vue.js之组件data的使用】运行结果如下所示：
Vue.js之组件data的使用
文章图片

点击任意一个组件，其它组件的数据都会发生变化。
因此，我们应当使用一个函数作为data选项，让这个函数返回一个新对象：
Vue.component('my-component', { data: function(){ return {a : 1} } })

如下代码所示：
- 锐客网

运行结果如下所示：
Vue.js之组件data的使用
文章图片

各个组件之间数据互不影响。

    推荐阅读


    上一篇：妙莲作业本4月11日（40次）

    下一篇：设计师们~这是一份给你们的感谢信哦