初始化vue中data中的数据

这篇具有很好参考价值的文章主要介绍了初始化vue中data中的数据。希望对大家有所帮助。如果存在错误或未考虑完全的地方,请大家不吝赐教,您也可以点击"举报违法"按钮提交疑问。

当组件的根元素使用了v-if的时候, 并不会初始化data中的数据 如果想完全销毁该组件并且初始化数据,需要在使用该组件的本身添加v-if 或者是手动初始化该组件中的数据

初始化化数据的一些方法

Object.assign(this.$data, this.$options.data())
this.$data:当前的data数据(修改过后的);
this.$options.data():初始化的data数据;
Object.assign的作用就是把this.$options.data()的值赋值给this.$data;
// 表单初始化
this.form = this.$options.data().form
//  vue在创建页面是会把data数据绑定到option属性里,恢复只需要调用就可以了

下面详细说说Object.assign的用法:

ES6的官方文档的解释是:Object.assign() 方法用于将所有可枚举属性的值从一个或多个源对象复制到目标对象。它将返回目标对象
方法一:
this.数据名 = this.$options.data().数据名;//重置某一个指定的数据

方法二:
this. d a t a = t h i s . data = this. data=this.options.data(); //初始化data里面的所有数据
方法三:
Object.assign(this. d a t a , t h i s . data, this. data,this.options.data()) //获取data源对象,覆盖当前data对象状态

初始化vue中data中的数据

以下是一个简单的例子

未销毁数据的 直接在根元素上使用v-if 只是销毁了el-dialog组件及其中的数据 并没有销毁当前组件的数据

父组件
<template>
  <div>
    <el-button @click="handleOpen">显示</el-button>
    <el-button @click="handleCls">隐藏</el-button>
    <Children ref="children" />
  </div>
</template>

<script>
import Children from './children.vue'
export default {
  name: 'Father',
  components: {
    Children
  },
  props: {

  },
  data() {
    return {

    }
  },
  methods: {
    handleOpen() {
      this.$refs.children.dialogFormVisible = true
      self.console.log(this.$refs.children.dialogFormVisible)
    },
    handleCls() {
      this.$refs.children.dialogFormVisible = false
    }
  }

}
</script>

<style lang="scss" scoped>

</style>

子组件
<template>
  <el-dialog v-if="dialogFormVisible" title="收货地址" :visible.sync="dialogFormVisible">
    <el-form :model="form">
      <el-form-item label="活动名称" :label-width="formLabelWidth">
        <el-input v-model="form.name" autocomplete="off" />
      </el-form-item>
      <el-form-item label="活动区域" :label-width="formLabelWidth">
        <el-select v-model="form.region" placeholder="请选择活动区域">
          <el-option label="区域一" value="shanghai" />
          <el-option label="区域二" value="beijing" />
        </el-select>
      </el-form-item>
    </el-form>
    <div slot="footer" class="dialog-footer">
      <el-button @click="dialogFormVisible = false">取 消</el-button>
    </div>
  </el-dialog>
</template>

<script>
export default {
  components: {
  },
  data() {
    return {
      dialogFormVisible: false,
      form: {
        name: '',
        region: '',
        date1: '',
        date2: '',
        delivery: false,
        type: [],
        resource: '',
        desc: ''
      },
      formLabelWidth: '120px'
    }
  }
}
</script>

<style lang="scss" scoped>

</style>

显示效果

第一次填写数据
初始化vue中data中的数据
第二次打开
初始化vue中data中的数据

销毁数据的

父组件
<template>
  <div>
    <el-button @click="handleOpen">显示</el-button>
    <el-button @click="handleCls">隐藏</el-button>
    <Children v-if="dialogShow" ref="children" @handleClose="handleClose" />
  </div>
</template>

<script>
import Children from './children.vue'
export default {
  name: 'Father',
  components: {
    Children
  },
  props: {

  },
  data() {
    return {
      dialogShow: false
    }
  },
  methods: {
    handleOpen() {
      // this.$refs.children.dialogFormVisible = true
      this.dialogShow = true
      // self.console.log(this.$refs.children.dialogFormVisible)
    },
    handleCls() {
      this.dialogShow = false
      // this.$refs.children.dialogFormVisible = false
    },
    handleClose() {
      this.dialogShow = false
    }
  }

}
</script>

<style lang="scss" scoped>

</style>
子组件
<template>
  <el-dialog title="收货地址" :visible="true">
    <el-form :model="form">
      <el-form-item label="活动名称" :label-width="formLabelWidth">
        <el-input v-model="form.name" autocomplete="off" />
      </el-form-item>
      <el-form-item label="活动区域" :label-width="formLabelWidth">
        <el-select v-model="form.region" placeholder="请选择活动区域">
          <el-option label="区域一" value="shanghai" />
          <el-option label="区域二" value="beijing" />
        </el-select>
      </el-form-item>
    </el-form>
    <div slot="footer" class="dialog-footer">
      <el-button @click="handleClose">取 消</el-button>
    </div>
  </el-dialog>
</template>

<script>
export default {
  components: {
  },
  data() {
    return {
      dialogFormVisible: false,
      form: {
        name: '',
        region: '',
        date1: '',
        date2: '',
        delivery: false,
        type: [],
        resource: '',
        desc: ''
      },
      formLabelWidth: '120px'
    }
  },
  methods: {
    handleClose() {
      this.$emit('handleClose')
    }
  }
}
</script>

<style lang="scss" scoped>

</style>

显示效果

第一次填写
初始化vue中data中的数据
第二次打开数据已经清空了
初始化vue中data中的数据文章来源地址https://www.toymoban.com/news/detail-448771.html

到了这里,关于初始化vue中data中的数据的文章就介绍完了。如果您还想了解更多内容,请在右上角搜索TOY模板网以前的文章或继续浏览下面的相关文章,希望大家以后多多支持TOY模板网!

本文来自互联网用户投稿,该文观点仅代表作者本人,不代表本站立场。本站仅提供信息存储空间服务,不拥有所有权,不承担相关法律责任。如若转载,请注明出处: 如若内容造成侵权/违法违规/事实不符,请点击违法举报进行投诉反馈,一经查实,立即删除!

领支付宝红包 赞助服务器费用

相关文章

  • 【数据结构】线性表(六)堆栈:顺序栈及其基本操作(初始化、判空、判满、入栈、出栈、存取栈顶元素、清空栈)

       堆栈Stack 和 队列Queue 是两种非常重要的数据结构,两者都是特殊的线性表: 对于堆栈,所有的插入和删除(以至几乎所有的存取)都是在表的同一端进行 对于队列,所有的插入都是在表的一端进行,所有的删除(以至几乎所有的存取)都是在表的另一端进行。    堆

    2024年02月07日
    浏览(44)
  • 【C++】【数据结构】循环队列的基本操作(初始化、入队、出队、取队头元素、遍历输出队列、求队列长度)顺序队列的算法实现【附全代码】

    使用c++完成数据结构循环队列的基本操作,包括(初始化、入队、出队、取队头元素、遍历输出队列、求队列长度等),可直接编译运行。 队列 又称为 “先进先出” (FIFO)线性表。限定插入操作只能在队尾进行,而删除操作只能在队首进行。 循环队列 ——采用 顺序存储结构

    2023年04月16日
    浏览(51)
  • 顺序栈的初始化、构建、入栈,出栈和取栈顶元素

    算法步骤: ①为顺序栈分配一个最大容量为MAXSIZE的数组空间,使base指向这段空间的基地址(栈底); ②栈顶指针top初始为base,表示栈为空; ③stacksize置为栈的最大容量MAXSIZE; 算法步骤: ①判断栈是否为满,若满则返回ERROR; ②将新元素压入栈顶,栈顶指针+1; 算法步

    2024年02月07日
    浏览(45)
  • Fluent中的各种初始化

    初始条件指的是初始时刻计算域所处的状态。通常需要人为指定。对于稳态问题,初始条件不会影响最终结果,但是会影响到计算收敛过程。若设定的初始条件与真实状态有较大差异时,可能会造成计算不收敛。对于瞬态问题,初始条件会直接影响计算结果。 在Fluent中进行求

    2024年02月16日
    浏览(41)
  • vue中初始化

    主要是挂载一些全局方法 响应数据相关的Vue.set, Vue.delete, Vue.nextTick以及Vue.observable 插件相关的Vue.use 对象合并相关Vue.mixin 类继承相关的Vue.extend 资源相关,如组件,过滤器,自定义指令Vue.component, Vue.filter, Vue.directive 配置相关Vue.config以及Vue.options中的components,filters,directives 定

    2023年04月22日
    浏览(46)
  • 顺序栈的基本操作(存储结构设计、初始化、判空、判满、入栈、出栈、取栈顶元素、遍历输出栈内元素)

    以上为总的代码,对于栈满时存在一些问题待改进 ———————————————————————————————————————— 以下为代码编写过程,有参考网上大佬的代码   创建栈后报错,在scanf_s处缺少符号  会执行两遍创建栈?   在主函数里边确实有两

    2024年02月05日
    浏览(42)
  • Vue初始化项目加载逻辑

    项目创建 我们只需要创建项目即可,剩余的依赖都没必要安装 我们先来看main.js,咱们加了一行备注 通过备注可知,我们首先加载的是App.vue 我们再来看一下App.vue 里都有啥 也就是下面这个红框里的内容才是 那下面的内容是哪里来的呢 那就需要看一下路由设置了 我们看到/目

    2024年02月08日
    浏览(103)
  • Vue 新版 脚手架 初始化 笔记

    Vue2/Vue3 修改 node 更新源 将默认的 更新源修改为 淘宝的 下载地址 安装 一般 新版 Vue 脚手架不可以共存 所以如果有 旧版的脚手架 会提示你 需要卸载 原来的脚手架 然后重新执行上面的安装 安装好之后 就可以去初始化项目了 值得一提的是我在官方的文档中找到了一个 在使

    2024年02月20日
    浏览(37)
  • 1、前端项目初始化(vue3)

    安装npm,(可以用nvm管理npm版本)npm安装需要安装node.js(绑定销售?)而使用nvm就可以很方便的下载不同版本的node,这里是常用命令 配置npm源 命令: 设置镜像源: npm config set registry https://registry.npm.taobao.org 查看当前使用的镜像地址: npm config get registry 参考 :https://www.cnbl

    2024年01月20日
    浏览(52)
  • 记录使用uview的tabs组件初始化渲染下划线移位问题解决

    问题描述:初始化渲染后 tabs的下划线没有居中对其,出现异位。 问题分析:  网上很多大佬分析过出现原因了 记录下解决的过程:  在各个论坛搜集到解决方案都暂时无效  有使用v-if重新渲染的   有给类赋值偏移值的  有强行转换px的 因为各种原因这些方法在自己身上没有

    2024年02月14日
    浏览(47)

觉得文章有用就打赏一下文章作者

支付宝扫一扫打赏

博客赞助

微信扫一扫打赏

请作者喝杯咖啡吧~博客赞助

支付宝扫一扫领取红包,优惠每天领

二维码1

领取红包

二维码2

领红包