Vue将组件data内的数据重置

最新推荐文章于 2023-02-21 16:11:08 发布
最新推荐文章于 2023-02-21 16:11:08 发布
阅读量808 收藏
点赞数
文章标签： javascript ViewUI
原文链接：http://www.cnblogs.com/xiaomingBlog/p/7663380.html
版权 
Object.assign(this.$data, this.$options.data())
Object.assign是对象深复制
this.$data是组件内的数据对象，
this.$options.data()指的就是原始的数据。


参考文档https://developer.mozilla.org/zh-CN/docs/Web/JavaScript/Reference/Global_Objects/Object/assign

转载于:https://www.cnblogs.com/xiaomingBlog/p/7663380.html

OPOPLI2008
关注
  • 0
    点赞
  • 踩
  • 0
    收藏
    觉得还不错? 一键收藏
  • 0
    评论
Vue 重置组件到初始状态的方法示例
11-30
Vue 通过直接强制刷新 DOM 来达到重置组件的效果，这样可以重置一些组件的动画以及组件内初始的数据 强制重新生成 DOM 的实现 原理：强制重新生成 DOM 可以通过 Vue 中的 key 来实现。在 Vue 更新 Dom 时，如果 key 值相同则会对原有组件进行复用，如果不同，则会重新生成。 代码示例： 每次点击 refresh 按钮，Demo 组件都会重新生成 组件： /** * Demo.vue */ Demo [removed] export default { data () { ret
重置vue组件的data数据
weixin_43899935的博客
03-25 470
做项目的时候有时候需要重置数据，比如用户填完了想重新写，或者弹窗表单，关闭弹窗的时候，就可以用这个方法，当然如果用的element-ui也可以用this.$refs[ruleForm].resetFields(); export default{ data(){ retrun{ ruleForm:{ name:"", age:"", sex:'' } ...
在VUE组件里面重置数据
我的博客
05-31 787
方法一、重置表单数据from this.form = this.$options.data().form 方法二、重置所有数据 this.$data = this.$options.data()
vue 父组件传值给子组件 子组件的销毁与重置 外部调用自己的函数
qq_38674970的博客
11-09 7316
<rolesadd @my-event="addRoles = false" :IsOfficial="IsOfficial"></rolesadd> // 父组件 :IsOfficial 子组件接收值 IsOfficial 要传的值 props: { IsOfficial: Boolean, }, <el-checkbox...
Vue子组件重新渲染
小白的博客
02-17 6029
vue2 子组件强制刷新 把一个组件重置到初始状态是一个常见的需求， 推荐的做法有两种，一种是父组件重置子组件的 prop，另一种是子组件暴露一个重置的方法供父组件调用。 但有些时候，子组件既没有提供重置的方法，也没提供 prop 来重置自己的状态。 更重要的是，这个子组件我们还动不了。于是我们就需要一种 hack 的方式来强制子组件重置到初始状态。方法如下： <component v-...
Vue切换组件实现返回后不重置数据,保留历史设置操作
10-15
在Vue.js应用中，我们经常需要在用户切换组件或路由时保持某些数据的状态，以便当用户返回时，之前的操作和设置依然保留。这通常涉及到组件的缓存与生命周期管理。本文将详细介绍如何在Vue中实现这个功能，以及如何...
vue 强制组件重新渲染(重置)的两种方案
10-16
本文将介绍两种强制Vue组件重新渲染（重置）的方法。 **方法一：使用`v-if`指令** 这种方法是通过监听数据变化，然后改变一个控制组件是否显示的标志来实现组件的销毁和重建。首先，我们在模板中使用`v-if`指令，...
vue 组件销毁并重置的实现
01-19
当数据变更后,通过watch 监听，先去销毁当前的组件，然后再重现渲染。使用 v-if 可以解决这个问题 [removed] export default{ data(){ return { reFresh:true, menuTree:[] } }, watch:{ menuTree(){...
vue将data恢复到初始状态 && 重新渲染组件实例
10-14
本文将深入探讨如何将Vue组件的`data`恢复到初始状态以及如何重新渲染组件实例。 首先，让我们看看如何将`data`恢复到初始状态。在Vue中，`data`属性是一个函数，用于创建组件实例的初始数据对象。当我们想要将组件...
项目开发之vue中如何刷新子组件，重置组件，重新加载子组件
Jocelyn_书
02-21 1万+
vue中如何刷新子组件，重置组件，重新加载子组件
vue父组件清空子组件填写的值
weixin_40716682的博客
11-17 4269
<component ref="XXX" v-show="isShow" @hidden="hidden"></component> 子组件添加ref的属性，然后通过 this.$refs.属性名，获取子组件的DOM的所有元素 this.$refs.XXX
vue系列：重置data中的值
分享前端开发工程师的一些日常生活、前端知识点、职业发展、对一些问题的看法、感悟等等
12-22 754
场景 我们提交完表单之后想要重置表单的数据，但是一个一个赋值又很麻烦，所以有了下面的方案。 解决 方法一（推荐） // 组件当前data对象 this.$data // 组件初始化状态下的data对象 this.$options.data() // 重置data对象到初始化状态 Object.assign(this.$data, this.$options.data()) // 重置data对象的表单数据到初始化状态 Object.assign(this.$data.form, this.$options
学习笔记——keep-alive缓存组件，再次返回组件data数据重置
qq_41339126的博客
01-13 1118
使用keep-alive缓存组件，当再次返回该组件后，希望其组件中的数据或状态，保持上次离开该组件时的情况。
Vue中重置data的数据为初始状态
第一行代码
08-20 3万+
在某些情况下，需要重新使用data中的数据，但是data中的数据已经被各种表单、变量等赋值，那么怎么重置data的值呢？ 1. 逐个赋值 ... data() { return { name: '', sex: '', desc: '' } } ... // 逐个赋值 this.name = '' this.sex = '' this.desc = '' 这个方法比较笨，...
vue全部清空初始化组件data的值
weixin_40716682的博客
11-17 2206
初始化所有数据 Object.assign(this.$data,this.$options.data()) 初始化某个对象中的数据 Object.assign(this.$data.xxx,this.$options.data().xxx)
vue清空子组件数据或强制刷新子组件
g1437353759的博客
02-22 5559
需求：每次点开子页面的时候，里面的表单内容都为空 this.$refs[‘form’].resetFields() 1、可以通过ref把表单数据绑定上 在data中定义form写入对应key和value(每个input输入的值) 在点击按钮打开子组件的时候是触发这个语句，这样每次打开表单数据都是空的， 当然如果想表单输入一半关掉但不希望表单内容清空就不能用上面那句话的写法了，只需要在表单提交成功之后写入这句话就好了 2、可以给定一个v-if 通过其特性来强制刷新页面 这个是引入的子组件和写在同一个文
vue 强制组件重新渲染（重置）
热门推荐
zyx的博客
01-26 5万+
数据通过异步操作后，对之前刚加载的数据进行变更后，发现数据不能生效 方案一 当数据变更后,通过watch 监听，先去销毁当前的组件，然后再重现渲染。使用 v-if 可以解决这个问题 &lt;template&gt; &lt;third-comp v-if="reFresh"/&gt; &lt;/template&gt; &lt;script&gt; export defaul...
【vue】三种方法重置vue组件的data数据
A_soulmate的博客
01-11 9504
我们在vue组件中经常遇到需要重置表单的场景，需要重置data中的对象
vue 实现切换门店 重置子组件的数据
最新发布
06-12
实现切换门店并重置子组件的数据可以通过以下步骤实现： 1. 在父组件中定义一个 `selectedStore` 变量，用于存储当前选择的门店。 2. 在切换门店时，更新 `selectedStore` 变量的值，并将其传递给子组件。 3. 在子组件中使用 `watch` 监听 `selectedStore` 变量的变化，当变化时，执行重置子组件数据的操作。 具体实现如下： 父组件： ```vue <template> <div> <select v-model="selectedStore" @change="onChangeStore"> <option v-for="store in stores" :value="store">{{ store.name }}</option> </select> <child-component :store="selectedStore" /> </div> </template> <script> import ChildComponent from './ChildComponent.vue'; export default { components: { ChildComponent, }, data() { return { stores: [ { id: 1, name: 'Store A' }, { id: 2, name: 'Store B' }, { id: 3, name: 'Store C' }, ], selectedStore: null, }; }, methods: { onChangeStore() { // 切换门店 }, }, }; </script> ``` 子组件： ```vue <template> <div> <p>当前门店：{{ store.name }}</p> <!-- 子组件的内容 --> </div> </template> <script> export default { props: { store: { type: Object, required: true, }, }, watch: { store: { immediate: true, // 立即执行一次 handler() { // 重置子组件数据 }, }, }, }; </script> ``` 在子组件中使用 `watch` 监听 `store` 变量的变化，当变化时，执行重置子组件数据的操作。由于 `immediate` 属性设置为 true，因此在子组件创建时会立即执行一次。

“相关推荐”对你有帮助么？

  • 非常没帮助
  • 没帮助
  • 一般
  • 有帮助
  • 非常有帮助
提交
评论
添加红包

请填写红包祝福语或标题

个

红包个数最小为10个

元

红包金额最低5元

当前余额3.43元 前往充值 >
需支付：10.00元
成就一亿技术人!
领取后你会自动成为博主和红包主的粉丝 规则
hope_wisdom
发出的红包
实付元
使用余额支付
点击重新获取
扫码支付
钱包余额 0

抵扣说明：

1.余额是钱包充值的虚拟货币，按照1:1的比例进行支付金额的抵扣。
2.余额无法直接购买下载，可以购买VIP、付费专栏及课程。

余额充值