Vue （ .sync 修饰符）你了解多少以及directive指令？

最新推荐文章于 2023-07-22 10:10:36 发布

zhoutingxixi

最新推荐文章于 2023-07-22 10:10:36 发布

阅读量234

点赞数 2

文章标签： vue

本文链接：https://blog.csdn.net/weixin_43844696/article/details/106576159

版权

在这里由浅入深：

.sync 修饰符算是 Vue 的所有修饰符中较难理解的一个，本篇文章就带你走近 .sync 的世界，深入理解后会发现，其实也就那么回事。修饰符和指令息息相关，下面从指令 -> 修饰符 -> .sync 修饰符由浅入深地来讲解 .sync 的含义及用法。

1、指令

指令即 Directive，从字面意思理解就是我告诉你要做什么，就是发送了一个指令，然后由接收指令的人去做就好了。在 Vue 中的指令有个统一好认的格式，就是以 v- 开头的就是指令，如：

<div v-text="x"> </div> //v-text指定标签文本指令
<div v-on:click="add"> <div> //v-on事件绑定指令

但并不是所有的指令都以 v- 开头，对于一些简写，也是指令，如

<img :src="x"> </img> //v-bind:src 的简写
<button @click="add"> </button> //v-on:click 的简写

2、修饰符

修饰符是与指令中的事件处理指令 v-on 息息相关的一个语法糖，所谓语法糖就是很 sweet，简单好用，在编程界就是能帮你做好的都帮你做了，只剩最简单的事留给你做。

在事件处理程序中，有一些非常常见的需求，例如 event.preventDefault() 阻止默认事件和 event.stopPropagation()阻止事件冒泡等等。因此 Vue 就把这些事件处理过程中常见的需求帮我们处理好了，在我们需要时告诉 Vue 一声，它就会自动帮我们阻止默认事件、阻止事件冒泡等。那么我们告诉 Vue 的途径就是 Vue 提供给我们的修饰符，修饰符是由点开头的指令后缀来表示的

以阻止 <a> 标签的点击默认刷新页面事件的 preventDefault 方法示例如下：

普通做法

<a href="" v-on:click="pe($event)">Vue点击链接</a> //vue中访问原始的DOM事件，可以用特殊变量 $event 把它传入方法，在原始 HTML 中是 event

// ... 
methods: {
    pe(e){
        e.preventDefault()
    }
}

使用修饰符

<a v-on:click.prevent>Vue点击链接</a> //prevent修饰符就等同于上述的 e.preventDefault()

由上述的小例可以看出，修饰符是不是个语法糖，帮我们把常用的需求提前写好了，用的时候说一声就行。当有事件处理程序时直接在后面继续写即可，如下：

<a href="" v-on:click.prevent="pp">Vue点击链接</a>

// ... 
methods: {
    pp(){
        console.log('不跳转页面执行事件')
    }
}

修饰符是有顺序地执行的，如上述的 v-on:click.prevent="pp"，意思就是在点击时，先执行修饰符 prevent 的阻止默认事件，然后再执行后面的 pp 事件处理函数。

修饰符几乎是和事件 event 的相关处理函数一一对应的，根据事件的不同，对应不同事件的修饰符，如下所示分为几大类：

Vue官网—事件修饰符
 Vue官网—按键修饰符

修饰符的来源和含义就是上述所述，至于具体有哪些，在实际用到时可去官网查找所需，有两个最最常用的需要记住，即 @click.stop 是阻止事件冒泡，@click.prevent 是阻止默认事件，@keypress.enter 是按键为回车事件。

3 、.sync 修饰符

.sync 修饰符相对来说比较特殊，因为其不是事件 event 原有的事件处理相关函数的演变，而是 Vue 自己定义的一个修饰符，如上述的修饰符分类中也将 .sync 分类为自定义事件的修饰符，那么这个自定义事件到底是什么事件呢？

这个事件对应的是 eventBus 事件，eventBus 事件是 MVC 中的一个模式，简单来说就是发布和订阅的过程，就是说有两方，甲方负责始终监听某个事件，乙方负责在需要的时候触发这个事件，甲方在监听到事件被触发时就执行某些操作。甲方就是订阅，乙方就是发布，双方就是发布和订阅模式。

那么在 Vue 中在什么时候会需要用到这种情况呢？

就是在 Vue 的组件在接受外部数据 props 时，Vue 规定，子组件在通过 props 接受外部数据后只有使用该数据的权利，但没有修改该属性的权利。因为，如果子组件修改了外部传来的数据，这样一来子组件和使用其的父文件都可以改来改去，在父组件和子组件都没有明显的改动来源，到最后都不知道这个数据是谁改的了，数据就不好控制了。因此 Vue 就规定组件只能有权使用 props 的属性，不得自己改变，那么若其想要改变，就必须通知该数据的真正拥有者改变，也就是使用该组件的父文件。

其使用的通知方式就是 eventBus 发布和订阅模式。

不使用 .sync

子组件触发事件，事件名格式必须是 update:myPropName ，用 $emit 函数触发

this.$emit('update:title', newTitle) //newTitle就是你想要修改props数据修改后的值

父组件可以监听那个事件并根据需要更新一个本地的数据属性

<myconponent :title="Ptitle" @update:title="Ptitle = $event" ></myconponent>
//在父组件中监听该事件，该事件触发后传递的值以 $event 接收，$event === newTitle ,Ptitle是父组件的数据

或者是定义的接受函数的参数

<myconponent :title="Ptitle" @update:title="val => Ptitle = val" ></myconponent>
//这时接收的值作为函数的参数

使用 .sync

上述的过程在实际需求中很常用，因此 Vue 就将父组件的监听定义成了一个传值时的修饰符，为 .sync ，上述代码使用 .sync 修饰符后为：

子组件(是一样的)

this.$emit('update:title', newTitle)

父组件

<myconponent :title.sync="Ptitle"></myconponent> //等同于上面的传值并监听

上完整代码：

父组件

<template>
    <div>
        <input type="button"
               value="我是父组件中的按钮"
               @click="show">
        <child :isShow.sync="isShow" v-show="isShow"/>
    </div>
</template>
<script>
    import child from "@/components/child"
    export default {
        data() {
            return {
                isShow:false
            }
        },
        components:{
            child
        },
        methods:{
            show(){
                this.isShow=true;
            },
            changeIsShow(bol){
                this.isShow=bol;
            }
        }
    }
</script>

子组件：

<template>
    <div>
         我是一个子组件，我在红色的海洋里！
        <input type="button" value="点我隐身" @click="upIsShow">
    </div>
</template>
<script>
    export default {
        methods:{
            upIsShow(){
                this.$emit("update:isShow",false);
            }
        }
    }
</script>

是不是很 sweet 呢？

Vue实现自定义指令 Vue.directive

<!DOCTYPE html>
<html lang="en">
<head>
  <meta charset="UTF-8">
  <title>Document</title>
</head>
<body>
  <div id="app">
    <p v-color="red">我是自定义指令</p> red绑定到data里面的变量
    <p v-color="'blue'">我是自定义指令</p> 也支持字符串
  </div>
<script src='vue.js'></script>
<script>
  // 注册一个全局的自定义指令
  Vue.directive('color', {
   inserted: function (el,binding) {
    console.log(el,binding)
    el.style.color = binding.value
   }
  })
  new Vue({
    el:'#app',
    data:{
      red:'red'
    }
  })
</script>
</body>
</html>