1.修饰符.sync

  由于保持数据的单向性,从父组件传到子组件的数据,子组件如果修改了项目还可以运行浏览器上会报错,加上.sync后子组件内部改变props属性值并更新到父组件中

<child :name.sync="name"></child>  // 父组件

// 子组件事件
changePropsInChild(){
      this.$emit('update:name', 'I am from child');
}

:name.sync就是:name="name" @update:name="name = $event"的缩写

2.修饰符.lazy

 v-model双向数据绑定,输入框输入内容时视图就更新了,如果想要输入完所有东西,光标离开才更新视图

<input type="text" v-model.lazy="value">

3.修饰符.passive

在监听元素滚动事件的时候,会一直触发onscroll事件,在pc端是没啥问题的,但是在移动端,会让我们的网页变卡,因此我们使用这个修饰符的时候,相当于给onscroll事件整了一个.lazy修饰符

<div v-on:scroll.passive="onScroll">...</div>

4.修饰符.native

这个修饰符只能是操作在组件上,把一个vue组件转化为一个普通的HTML标签,如果是操作在普通HTML标签上会失效

<My-component @click.native="shout(3)"></My-component>

 

Logo

前往低代码交流专区

更多推荐