<body>

        <div id="app">

            <counter></counter>

        </div>

        <template id="temp1">

            <div>

                <input type="button" value="+1" @click="increment">

                <h3>{{count}}</h3>

            </div>

        </template>

        <script type="text/javascript">

            var dataObj = {count: 0};

            Vue.component('counter',{

                template:'#temp1',

                data(){

                    return dataObj

                },

                methods:{

                    increment() {

                        this.count++

                    }

                }

            })

            var vm = new Vue({

                el: "#app",

                data:{},

                methods: {}

            })

        </script>

    </body>

分析如上代码：

1、首先创建一个名字为counter的组件，data函数中返回一个外部定义的对象的值，如果直接给data属性设置一个对象而不是函数，那么会在浏览器中直接报错

2、在浏览器中运行代码

每次点击+1按钮，下边的值就会加一

3、如果我们在页面上同时使用三个counter组件

<div id="app">

    <counter></counter>

    <hr>

    <counter></counter>

    <hr>

    <counter></counter>

    <hr>

 </div>

然后在浏览器中再次浏览

点击任意一个+1按钮，三个数同时变化。因为它们都指向了同一个对象。我们当然希望点击不同的按钮只实现当前组件内数据的变化，那么，我们在函数中返回一个对象，每次创建一个组建的时候，在内存中同时开辟一块空间给当前组件存放data，这样，就不会出现共用一个data的现象。我们只需将如上代码进行一点更改

data: function (){

    //return dataObj

    return{

        count：0

    }

},

vue组件中data为什么必须是个函数的更多相关文章

  1. vue组件中data为什么必须是一个函数？

    因为JavaScript的特性所导致,在component中,data必须以函数的形式存在,不可以是对象. 组建中的data写成一个函数,数据以函数返回值的形式定义,这样每次复用组件的时候,都会返回一 ...

  2. Vue 组件中 data 为什么必须是函数

    原文地址 vue组件中的data必须是函数 类比引用数据类型 Object是引用数据类型,如果不用function 返回,每个组件的data 都是内存的同一个地址,一个数据改变了其他也改变了; jav ...

  3. 怎样理解 Vue 组件中 data 必须为函数 ?

    组件意在 复用 , 若为 对象, 则会相互干扰. 且 Vue 不允许此事发生, 规定必须为函数, 否则报错. 原理如下 对象 // 模拟创建组件 var Component= function() { ...

  4. vue组件中data是个函数

    当我们const vm = new Vue({ el : '#app',   data : { msg:‘hello World’ } })用习惯了,data是一个对象,可到了vue组件 Vue.co ...

  5. Vue组件里面data为什么必须是个函数

    在创建或注册模板的时候,传入一个data属性用来绑定数据,但是在组件中,data必须是一个函数,而不能直接把对象赋值给它. export default { name:'app', data(){ r ...

  6. 039——VUE中组件之子组件中data使用实例与text-xtemplate的使用方法

    <!DOCTYPE html> <html lang="en"> <head> <meta charset="UTF-8&quo ...

  7. 15.Vue组件中的data

    1.组件中展示数据和响应事件: // 1. 组件可以有自己的 data 数据 // 2. 组件的 data 和 实例的 data 有点不一样,实例中的 data 可以为一个对象 // 3. 但是组件中 ...

  8. vue组件中的data为什么是函数？

    一.vue组件中的data为什么是函数 为了保证组件的独立性 和 可 复用性,data 是一个函数,组件实例化的时候这个函数将会被调用,返回一个对象,计算机会给这个对象分配一个内存地址,你实例化几次, ...

  9. Vue组件中引入jQuery

    一.安装jQuery依赖 在使用jQuery之前,我们首先要通过以下命令来安装jQuery依赖: npm install jquery --save # 如果你更换了淘宝镜像,可以使用cnpm来安装, ...

随机推荐

  1. Java设置接口跨域

    现在我们很多项目都是基于Java的REST结构风格前后端分离,在前端访问后端的时候就存在跨域,这个时候后端接口不处理就会存在访问不了.上代码! 1.创建一个Filter 在web.xml中配置 < ...

  2. 对const的总结与思考

    今天偶然想起const这一关键字,再加之以前几种const修饰指针方式让我印象深刻(混淆不清),重新回顾了一下,自己对这个关键词也又有了更加深刻的理解,所以总结一下. 一.const的定义 const ...

  3. [POI2015]PUS

    嘟嘟嘟 这题只要往正确的方面想,就很简单. 首先,这是一道图论题! 想到这,这题就简单了.对于两个数\(i\)和\(j\),如果\(i\)比\(j\)大,就从\(i\)向\(j\)连边.然后如果图中存 ...

  4. git 本地代码冲突解决，强制更新

    git reset soft,hard,mixed之区别深解 git reset --hard  强制更新覆盖本地   GIT reset命令,似乎让人很迷惑,以至于误解,误用.但是事实上不应该如此难 ...

  5. 记录使用nodejs时，未正确使用import导致的错误

    2019/04/08 今天看了es6入门,才发现以前碰到的关于import的错误,是因为使用了import,但nodejs默认不支持导致的. 如果想要使用es6的module功能,需要把整个文件的导入 ...

  6. CSS如何把一张横向的长图变成竖向的？

    前言: 有时候做项目过程中,设计的是一张横向的长图,但是我们需要在手机端观看的时候,也想把手机横着观看,这样视野更宽阔,如何解决这个问题呢? html <div class="imgB ...

  7. Capability配置简介

    什么是Capability desired capability的功能是配置Appium会话.他们告诉Appium服务器您想要自动化的平台和应用程序. Desired Capabilities是一组设 ...

  8. 存储类&作用域&生命周期&链接属性

    链接属性 (1)大家知道程序从源代码到最终可执行程序,经历的过程:编译.链接. (2)编译阶段就是把源代码搞成.o目标文件,目标文件里面有很多符号和代码段.数据段.bss段等分段.符号就是编程中的变量 ...

  9. C++继承(一) 三种继承方式

    继承定义 继承是使代码可以复用的重要手段,也是面向对象程序设计的核心思想之一. 继承就是不修改原有的类,直接利用原来的类的属性和方法并进行扩展.原来的类称为基类,继承的类称为派生类,他们的关系就像父子 ...

  10. ubuntu配置ssh连接方式

    pgadmin4 配置界面的password指的是数据库用户的密码, 不是服务器的密码. pg数据库 1.确保远程服务器开放相应端口.这个是在防火墙设置. 2.pg数据库服务器允许外部ip访问, 默认 ...