Vue组件中的data为什么必须是个函数

最新推荐文章于 2022-11-07 14:43:38 发布

新手小白请求出战！

最新推荐文章于 2022-11-07 14:43:38 发布

阅读量85

点赞数 1

分类专栏：前端笔记文章标签： javascript vue.js html5 es6

本文链接：https://blog.csdn.net/qq_41138726/article/details/109753447

版权

前端笔记专栏收录该内容

39 篇文章 0 订阅

订阅专栏

在创建或注册模板的时候，传入一个data属性作为用来绑定的数据。但是在组件中，data必须是一个函数，而不能直接把一个对象赋值给它。

<body>
    <!-- 组件实例对象 -->
    <div id="app">
     <cpn></cpn>
     <cpn></cpn>
     <cpn></cpn>
    </div>
    <template id="cpn">
     <div>
        
         <h2>当前计数:{{counter}}</h2>
          <button @click="increment">+</button>
          <button @click="decrement">-</button>
     </div>
    </template>
    <script src="../vue.js"></script>
    <script>
        // 注册组件
        Vue.component('cpn',{
            template:'#cpn',
            data(){
                // 不会相互影响,必须是个函数
                return {
                    counter:0
                }
            },
            
            methods:{
                increment(){
                   this.counter++;
                } ,
                decrement(){
                    this.counter--;
                }
            }
        })
        const app = new Vue({
            el: "#app",
            data: {
                message: "你好啊"
            }
        })
    </script>
</body>

新手小白请求出战！

关注

1
点赞
踩
0

收藏

觉得还不错? 一键收藏
0
评论
Vue组件中的data为什么必须是个函数

在创建或注册模板的时候，传入一个data属性作为用来绑定的数据。但是在组件中，data必须是一个函数，而不能直接把一个对象赋值给它。<body>  <div id="app"> <cpn></cpn> <cpn></cpn> <cpn></cpn> </div> <template id
复制链接

扫一扫

专栏目录