Vue组件中data的使用方式_vue data function

作者：我家自动化 | 2024-04-16 14:19:18

踩

vue data function

全局组件中的data使用方式：
js中写法：

Vue.component("mycom1",{
    template:'<h1>这是全局组件--{{msg}}</h1>',
    data:function () {
        return {
            msg:'这是全局组件中的data定义的数据'
        }
    }
});
var vm = new Vue({
    el:"#newBrand",
    data:{},
    }）；
1
2
3
4
5
6
7
8
9
10
11
12

html中写法：

<div id="newBrand">
	<mycom1></mycom1>
</div>


1
2
3
4
5

效果：
在这里插入图片描述
注：为什么组件中的data一定是一个function？
为了每个实例可以维护一份被返回对象的独立的拷贝，如果 Vue 没有这条规则，点击一个按钮就可能会整体同时更新，如：

声明：本文内容由网友自发贡献，不代表【wpsshop博客】立场，版权归原作者所有，本站不承担相应法律责任。如您发现有侵权的内容，请联系我们。转载请注明出处：https://www.wpsshop.cn/w/我家自动化/article/detail/434694