Vue组件中的data和methods

最新推荐文章于 2023-04-16 17:49:45 发布

小猫虎儿~

最新推荐文章于 2023-04-16 17:49:45 发布

阅读量361

点赞数

文章标签： vue.js javascript 前端

本文链接：https://blog.csdn.net/weixin_61562639/article/details/126275946

版权

组件可以拥有自己的数据
组件中的 data 和实例中的 data 有点不一样，实例中的 data 可以为一个对象。但是组件中的 data 必须是一个方法。
组件中的 data 除了是一个方法，还必须返回一个对象。
组件中的 data 的使用方式和实例中的 data 使用方式一样
组件中的 Methods 的定义和使用与实例中一样

<body>
    <div id='app3'>
        <mycomp></mycomp>
    </div>
    <template id='temp2'>
        <div>
            这是带有data的组件：{{msg}}
        </div>
    </template>
    <script>
        Vue.component('mycomp',{
            template:'#temp2',
            data:function(){
                return{
                    msg:'这是组件的data'
                }
            }
        })
        new Vue({
            el:'#app3'
        })
    </script>
</body>