vue中data必须是函数
2017-10-08 20:57
183 查看
看了好多博客论坛啥的,我比较笨不是很理解,包括我之前转载的一篇,不过我转载的我是看懂了,今天没事重新过了下官网,下面我们一起看看官网是如何给出解答的,这里面第一个他也用了return,但是和我们说的return不同,这个完全是为了躲避语法报错,我们也可以自己创建vue实例注册组件,然后多个地方同时注册,解释的还是很好的,我这里抛砖引玉下~~~
通过 Vue 构造器传入的各种选项大多数都可以在组件里用。
那么 Vue 会停止,并在控制台发出警告,告诉你在组件中
9 9 9
由于这三个组件共享了同一个
现在每个 counter 都有它自己内部的状态了:
1 5 7
通过 Vue 构造器传入的各种选项大多数都可以在组件里用。
data是一个例外,它必须是函数。实际上,如果你这么做:
Vue.component('my-component', { template: '<span>{{ message }}</span>', data: { message: 'hello' }}) |
data必须是一个函数。理解这种规则的存在意义很有帮助,让我们假设用如下方式来绕开 Vue 的警告:
<div id="example-2"> <simple-counter></simple-counter> <simple-counter></simple-counter> <simple-counter></simple-counter></div> |
var data = { counter: 0 }Vue.component('simple-counter', { template: '<button v-on:click="counter += 1">{{ counter }}</button>', // 技术上 data 的确是一个函数了,因此 Vue 不会警告, // 但是我们返回给每个组件的实例却引用了同一个 data 对象 data: function () { return data }})new Vue({ el: '#example-2'}) |
由于这三个组件共享了同一个
data,因此增加一个 counter 会影响所有组件!这不对。我们可以通过为每个组件返回全新的 data 对象来解决这个问题:
data: function () { return { counter: 0 }} |
1 5 7
相关文章推荐
- VUE 组建中的data必须为函数
- vue组件中data必须要写成函数的原因
- Vue组件中data选项为什么必须是函数
- Vue组件data必须是函数的理解
- Vue 组件 data为什么是函数?
- Vue 组件 data为什么是函数?
- 解析:vue.js中组件的data数据为什么是函数?
- Vue组件中的data必须是一个function的原因浅析
- Vue源码小问答一:为什么option.data的类型必须是function
- Vue实例里面的data属性为什么用函数返回
- vue的data为何是个函数
- perl 回调必须是函数引用
- 错误 1 类型“System.Data.OracleClient.OracleParameter”在未被引用的程序集中定义。必须添加对程序集“System.Data.OracleClient, Ver
- 在使用vue脚手架之前你必须掌握的:vue的模版以及路由用法
- 微信小程序 详解Page中data数据操作和函数调用
- C++ primer 这本书上有这么两句话“派生类虚函数调用基类版本时,必须显式使用作用域操作符。如果派生类函数忽略了这样做,则函数调用会在运行时确定并且将是一个自身调用,从而导致无穷递归。”
- 具有键×××的 ViewData 项属于类型System.String,但它必须属于类型IEnumerable<SelectListItem>
- 面试中必须会写的函数源码--------atoi()与itoa()
- 错误 CS0012: 类型“System.Data.Common.DbConnection”在未被引用的程序集中定义。必须添加对程序集“System.Data, Version=2.0.0.0, Culture=neutral, PublicKeyToke
- jQuery.data() 函数详解