《Vue修饰符总结》__前端__Vue.js
发布于 1 个月前 作者 banyungong 95 次浏览 来自 分享
粉丝福利 : 关注VUE中文社区公众号,回复视频领取粉丝福利

一、.sync修饰符

假设有以下场景,爸爸给儿子钱, 儿子要花钱:

爸爸和儿子通过属性 ‘money’ 来沟通

// 儿子的Props里有money
<script>
export default {
  props: ["money"]
};
</script>

爸爸:
<template>
  <div class="app">
    // 绑定儿子的money属性
    <Child :money="total"  />
  </div>
</template>

<script>
      // 引入儿子组件
import Child from "./Child.vue";
export default {
  data() {
    return { total: 10000 };
  },
  components: { Child: Child }
};
</script>

第一步

儿子触发一个要花钱的事件,然后告诉爸爸花完之后剩多少,这里假设儿子每次花100元

//儿子
<button [@click](/user/click)="$emit('update:money', money - 100)">
      <span>花钱</span>
</button>

核心代码是

$emit('update:money', money - 100)

儿子用$emit触发"update:money"事件,并且告诉爸爸,钱花了还剩下Money-100

注意:子组件不能直接修改Props的值,只能由父组件修改

第二步:

爸爸用v-on:‘update:money’ 监听 update:money事件,并用$event拿到参数

<Child :money="total" v-on:update:money="total = $event"  />

由于以上两步操作非常麻烦,于是就有了.sync语法糖

用法是直接在 :money 后加一个.sync修饰符

父组件:
<Child :money.sync="total" />

这一句代码就代替了以下这句代码:

父组件
<Child :money="total" v-on:update:money="total = $event"  />

小结:

<Child :money.sync="total" /> 等价于 绑定属性+监听事件+更新属性

<Child :money="total" v-on:update:money="total = $event"  />

二、事件修饰符

.stop

由于冒泡机制,我们给元素绑定点击事件的时候,也会触发父级的点击事件

<div [@click](/user/click)="shout(2)">
  <button [@click](/user/click)="shout(1)">ok</button>
</div>

//js
shout(e){
  console.log(e)
}
//1
//2

@click.stop 可以一键阻止冒泡, 相当于调用了event.stopPropagation()方法。

<div [@click](/user/click)="shout(2)">
  <button [@click](/user/click).stop="shout(1)">ok</button>
</div>
//只输出1

.prevent

用于阻止事件的默认行为,相当于写event.preventDefault()

例如,当点击提交按钮时阻止对表单的提交。

阻止点击a标签时跳转链接

//提交事件不再重载页面
<form v-on:submit.prevent="onSubmit"></form>
// 点击a标签不会跳转链接
<a [@click](/user/click).prevent href="baidu.com"></a>

三、键值修饰符

<input type="text" @keypress.enter="xxx">

当用户在键盘 敲下enter回车键时,会触发xxx事件

版权声明:著作权归作者所有。商业转载请联系作者获得授权,非商业转载请注明出处。 作者: fjl 原文链接:https://juejin.im/post/6991414565950980103

回到顶部