首页 > 其他分享 >VUE中的data(){return}与data:{}区别

VUE中的data(){return}与data:{}区别

时间:2023-09-22 10:45:38浏览次数:85  
标签:VUE return msg 引用 组件 data

组件是一个可复用的实例,当你引用一个组件的时候,组件里的data是一个普通的对象,所有用到这个组件的都引用的同一个data,就会造成数据污染。

data:{}

data:{
          msg: 0 
      }

使用return包裹后数据中变量只在当前组件中生效,不会影响其他组件。

data(){ return }

data(){
        return{
          msg: 0 
        }
      }

  

 

标签:VUE,return,msg,引用,组件,data
From: https://www.cnblogs.com/heibaiqi/p/17721756.html

相关文章

  • vue3 父子组件通信 setup
    父传子father<template><div><h2>父传子Father</h2><!--<buttonclass="bg-green-300roundedp-1">父按钮</button>--><divclass="w-[200px]h-[200px]bg-violet-200">......
  • VUE3+vite+arco design 项目初始化
    意见反馈系统总结创建项目首先选择一个文件夹进入命令窗口使用vite创建项目npmcreatevite@latest初始化项目后进入项目安装依赖npminstall运行npmrundev使用arcodesign组件库安装npminstall--save-dev@arco-design/web-vue引入import{createApp}fr......
  • Vue3组件通信方式
    Vue3组件通信方式不管是vue2还是vue3,组件通信方式很重要,不管是项目还是面试都是经常用到的知识点。比如:vue2组件通信方式props:可以实现父子组件、子父组件、甚至兄弟组件通信自定义事件:可以实现子父组件通信全局事件总线$bus:可以实现任意组件通信pubsub:发布订阅模式......
  • vue 解决报错
    目录vue解决报错ERRORError:EBUSY:resourcebusyorlocked,rmdir....errnoarco-init项目初始化失败!Error:spawnSyncpnpm.cmdENOENTvue解决报错ERRORError:EBUSY:resourcebusyorlocked,rmdir....errno最近入门vue,用字节跳动的arco初始化一个项目的时候报错......
  • Couchdb-权限绕过--命令执行--(CVE-2017-12635)&&(CVE-2017-12636)--H2database命令执
    Couchdb-权限绕过--命令执行--(CVE-2017-12635)&&(CVE-2017-12636)--H2database命令执行--(CVE-2022-23221)环境概述采用Vulfocus靶场环境进行复现,搭建操作和文章参考具体搭建教程参考vulfocus不能同步的解决方法/vulfocus同步失败。CouchdbCVE-2017-12635权限绕过漏洞概述A......
  • vue学习问题解决
    报错errorComponentname"Index"shouldalwaysbemulti-wordvue/multi-word-component-names解决方法1、问题说明:在创建组件命名时,引用index.vue的过程中报错;2、报错的原因及分析:其一、报错的全称为:errorComponentname"index"shouldalwaysbemulti-wordvue/multi-w......
  • 解析Vue项目
    解析Vue项目1、浏览器中访问某个地址,会显示某个页面的组件根组件:App.vue 2、配置路由router----》index.js---》constroutes=[{path:'/lqz',name:'lqz',component:Lqz#组件,需要导入......
  • CF1872E Data Structures Fan
    考查异或的基本性质。对于操作2,用两个变量\(X_0,X_1\)记录\(s_i=0/1\)位置的异或和,在查询时直接输出即可。那么,在操作1如何更新\(X_0,X_1\)?如果操作1只改变一个数,比如将\(s_i\)从\(0\)改为\(1\),那么我们只需将\(a_i\)从\(X_0\)中消除,并异或入\(X_1\)。如何消......
  • 解析vue项目、
    解析一下vue项目1为什么浏览器中访问某个地址,会显示某个页面组件//-根组件:App.vue必须是<template><divid="app"><router-view></router-view></div></template>//-1配置路由router---......
  • 如何修改vue-cli3预设的terser-webpack-plugin?
    要修改VueCLI3预设的terser-webpack-plugin插件配置,您可以使用VueCLI提供的配置文件和插件配置选项。以下是一些步骤来实现这个目标:创建配置文件:在您的VueCLI3项目根目录下,可以创建一个名为vue.config.js的文件,如果项目中还没有这个文件。这个文件将用于配置webpack......