vue 的data选项

最新推荐文章于 2022-11-01 19:45:30 发布

fifthThirteen

最新推荐文章于 2022-11-01 19:45:30 发布

阅读量194

点赞数

分类专栏： vue-study

本文链接：https://blog.csdn.net/qq_20087231/article/details/83376906

版权

vue-study 专栏收录该内容

14 篇文章 0 订阅

订阅专栏

验证data选项必须是函数

函数时，数据没有共享，互相独立

    <div id="app">
        <my-btn></my-btn>
        <my-btn></my-btn>
        <my-btn></my-btn>
        <my-btn></my-btn>
    </div>
    <template id="my_btn">
        <button @click="counter += 1">点击次数：{{counter}}</button>
    </template>
    <script src="js/vue.js"></script>
    <script>
        // 1.实例化组件
        Vue.component('my-btn', {
            template: '#my_btn',
            data() {
                return {
                    counter: 0
                }
            }
        });
        new Vue({
            el: '#app',
        });
    </script>

对象时，数据之间共享，不独立

    <div id="app">
        <my-btn></my-btn>
        <my-btn></my-btn>
        <my-btn></my-btn>
        <my-btn></my-btn>
    </div>
    <template id="my_btn">
        <button @click="counter += 1">点击次数：{{counter}}</button>
    </template>
    <script src="js/vue.js"></script>
    <script>
        let data = {
                counter: 0
            }
            // 1.实例化组件
        Vue.component('my-btn', {
            template: '#my_btn',
            data() {
                return data;
            }
        });
        new Vue({
            el: '#app',
        });
    </script>