zoukankan      html  css  js  c++  java
  • vue组件中data为什么必须是个函数

        <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
        }
    },

  • 相关阅读:
    微信小程序传参 查询数据库,显示在小程序上
    jquery 的$.ajax() 与php后台交互
    Laravel 7 中文文档
    phpStudy配置
    Mysql 聚合函数 嵌套使用
    MySQL 的IFNULL()、ISNULL()和NULLIF()函数
    MySQL 定义变量,并且可以当value 值插入
    排序算法之冒泡排序
    排序算法之快速排序
    链表之反转链表
  • 原文地址:https://www.cnblogs.com/zmyxixihaha/p/10660088.html
Copyright © 2011-2022 走看看