指令与sync修饰符

Posted 2023-05-02

参考技术A 一、指令
1、什么是指令
通俗来说，在Vue中以 v- 开头的东西就是指令（绑定和事件的缩写 ： 和 @ 是没 v- 的）
2、语法
v-指令名:参数=值 ， 如 ： v-on:click=add
如果值里没有特殊字符，则可以不加引号
有些指令没有参数和值，如：v -pre
有些指令没有值，如： v-on:click.prenvent

二、修饰符

比如上文的：v-on:click.prenvent 中的 .prenvent 就是修饰符。它们的功能各种各样

1、有哪些指令支持修饰符

@click.stop="add" 表示阻止事件传播/冒泡
@click.prevent="add" 表示阻止默认动作
@click.stop.prevent="add" 同时表示这两种意思

首先要明白：
在 Vue 中 ，子父组件最常用的通信方式就是通过 props 进行数据传递， props 值只能在父组件中更新并传递给子组件，在子组件内部，是不能改变传递进来的 props 值，这样保证了数据单行流通

例子

3、一共有多少修饰符

v-on支持的有： .keycode| keyAlias 、 . stop、.prevent 、 .capture 、 .self 、.once、 .passive、 .native

快捷键相关：.ctrl、.alt、.shift、 .meta、.exact
鼠标相关：.left、.right、.middle
v-bind 支持的有：.prop、.camel、.sync
v-model 支持的有：.lazy、.number、.trim

修饰符.sync的用法

修饰符.sync的用法

单个props数据绑定用法

sync
也能完成组件间的信息传值。
sync修饰符，他也是一语法糖，动态属性和update：属性名称，事件。

很明显它的意思就是说.sync修饰符可以像v-model一样实现类似双向绑定的场景用法。组件间修改某一个值，和同一个组件中修改一个值

这几行的大概意思就是要求我们用$emit('update:xx', 参数)的形式传参，因为如果不用这种方法子组件内的props参数将无法成功修改，而是没有反应，所以Vue官方建议我们在子组件触发传递父组件事件中也同样用update:xx这种写法。

例如：

父组中有子组件传值
<child :title.sync="msg"></child>


子中试图修改这个值，实现父子值传递双向绑定。
<button @click="setTitle">点击修改父组件信息</button>
props:["title"],
methods:
    setTitle()
        this.$emit("update:title",Date.now())/*固定写法*/
    

---

用法很像v-model双向数据绑定，将子组件的属性和父组件穿过的属性关联在一起，互相影响，同时改变。可以解决这样最基础的场景：子组件属性改变后父组件传值过来的父属性也要同时改变，就可以利用修饰符.sync。

对象型props数据绑定用法