搞清楚四个修饰符

42 阅读1分钟

一. @click.stop="xxx"

表示阻止事件的传播/冒泡

二. @click.precent="xxx"

表示阻止默认动作

三. @click.enter="xxx"

@click.enter是Vue.js中的一个指令,它是监听元素的"keyup"事件,并且仅在按下Enter键时触发。通常用于处理表单的提交事件。当用户在输入框中输入完内容后,按下Enter键就会触发@click.enter的方法,以完成表单的提交或其他操作。

四. :money.sync="total"

示例

//儿子代码
<button @click="$emit('update:money', money-100)">

儿子通过$emit触发事件并传参

//父亲代玛
<Child :money="total" v-on:update:money="total = $event"/>

父亲则通过v-on:update:money监听(¥event可以获取$emit的参数)

代码太复杂所以封装成

<Child:money.sync="total">

所以 .sync的作用 会自动将子组件传递给它的数据和一个更新父组件数据的方法进行绑定,使得当子组件中数据发生变化时,能够自动传递到父组件中,从而实现子组件与父组件的双向绑定。