<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. Python 爬虫 之 阅读呼叫转移（一）

    版权声明:本文为博主原创文章.未经博主同意不得转载. https://blog.csdn.net/jcjc918/article/details/37533073     你是否苦恼于网上无法下载的& ...

  2. Ubuntu通过apt-get安装指定版本和查询软件源有多少个版本

    一.通过apt-get安装指定版本 apt-get install <<package name>>=<<version>> 二.查询指定软件有多少个版 ...

  3. leetcode 54. Spiral Matrix 、59. Spiral Matrix II

    54题是把二维数组安卓螺旋的顺序进行打印,59题是把1到n平方的数字按照螺旋的顺序进行放置 54. Spiral Matrix start表示的是每次一圈的开始,每次开始其实就是从(0,0).(1,1 ...

  4. 类String 常用方法

    字符串当中的常用方法之比较相关的方法 public boolean equals (object obj):将此字符串与指定的对象进行比较(只有参数是字符串并且内容相同才会返回true) public ...

  5. Asp.net mvc 动作方法中 调用 另一个控制器的动作方法

    public ActionResult 动作方法(){ var otherController = DependencyResolver.Current.GetService<另一个控制器的类名 ...

  6. [c++项目]迷宫 控制台游戏

    #include<stdio.h> #include<windows.h> #include<stdlib.h> #include<time.h> #i ...

  7. Navicat 连接VMware中Ubuntu 下的mysql5.7遇到的坑

    1.用Navicat连接虚拟机下的mysql出现问题: 2003- Can't connect MySQL Server on '192.168.*.*'(10038). 解决方案: 方法:直接授权( ...

  8. MAC 的ideal 修改 项目名称

    在使用 ideal的时候 ,我拷贝了一个文件,想要修改项目的名称,改了qcs-regulation-hefei 但是 (1)我改了项目名称: (2)还改了 pom.xml 但是还是不行,来回切换不同的 ...

  9. 浅谈kafka streams

    随着数据时代的到来,数据的实时计算也越来越被大家重视.实时计算的一个重要方向就是实时流计算,目前关于流计算的有很多成熟的技术实现方案,比如Storm.Spark Streaming.flink等.我今 ...

  10. 如何用Electron Js创建第一个应用Hello World

    什么是Electron Node.js和Chromium的结合品.允许只使用HTML,CSS和JavaScript来开发跨平台桌面应用. 编写第一个Electron程序(Hello World) 在开 ...