当前位置: 代码迷 >> 综合 >> 开发问题随笔
  详细解决方案

开发问题随笔

热度:0   发布时间:2024-02-21 12:25:05.0

1、子组件修改父组件数据

不允许子组件直接改变父组件的数据,但是往往项目需求需要改变父组件的数据,那我们如何变通呢?

如果不想影响父组件的值,我们也可以用JSON颠倒转换的方式,在mounted方法中进行深拷贝,在data中初始化数据时用另一个变量作为承载,这样才承载变量改变,就不会影响父组件该变量的值了。

2、字体在一行显示不换行

.text-oneLine {display: block; /*内联对象需加*/word-break: keep-all; /* 不换行 */white-space: nowrap; /* 不换行 */overflow: hidden; /* 内容超出宽度时隐藏超出部分的内容 */text-overflow: ellipsis; /* 当对象内文本溢出时显示省略标记(...) ;需与overflow:hidden;一起使用。*/
}

3、attribute 是元素标签的属性,property 是元素对象的属性

4、深拷贝原始数据对象

JSON.parse(JSON.stringify(...))

5、关于生命周期钩子

所有的生命周期钩子自动绑定 this 上下文到实例中,因此你可以访问数据,对 property 和方法进行运算。这意味着你不能使用箭头函数来定义一个生命周期方法 (例如 created: () => this.fetchTodos())。这是因为箭头函数绑定了父上下文。

6、Vue中keep-alive的使用及详解

7、Vue .sync修饰符

代码简化:子组件内触发的事件名称以“update:myPropName”命名,父组件v-bind:value 加上.sync修饰符,即 v-bind:value.sync(父组件就不用再手动绑定@update:value事件)

关于 v-model双向绑定:一个组件上只能定义一个v-model,但如果有其他属性也要提供双向绑定,就需要.sync

注意点:

  • 如果一个组件的多个prop都要实现双向绑定, 则这么写 v-bind.sync = "对象"
  • .sync 修饰符的 v-bind 不能和表达式一起使用 (例如 v-bind:title.sync=”doc.title + ‘!’” 是无效的)
  • 将 v-bind.sync 用在一个字面量的对象上,例如 v-bind.sync=”{ title: doc.title }”,是无法正常工作的,

8、关于VUE生命周期

文章一

如果你知道你会在晚些时候需要一个属性,但是一开始它为空或不存在,那么你仅需要设置一些初始值。比如:


data: {newTodoText: '',visitCount: 0,hideCompletedTodos: false,todos: [],error: null

双向绑定数据时,视图会进行重渲染。只有当实例被创建时,data中存在的属性才是响应式的

 

 

 

 

 

 

 

 

 

 

 

 

 

 

 

 

 

 

 

 

 

 

 

 

 

 

 

 

 

 

 

 

 

 

 

 

 

 

 

 

 

 

 

 

 

 

 

 

 

 

 

 

 

 

 

 

 

 

 

 

 

 

 

 

 

 

 

 

 

 

 

 

 

 

 

 

 

 

 

 

 

 

 

 

 

 

 

 

 

 

 

 

 

 

 

 

 

 

 

 

 

 

 

 

  相关解决方案