Vue3中的setup与自定义指令如何使用

本篇内容主要讲解“Vue3中的setup与自定义指令如何使用”，感兴趣的朋友不妨来看看。本文介绍的方法操作简单快捷，实用性强。下面就让小编来带大家学习“Vue3中的setup与自定义指令如何使用”吧!

setup语法糖

最大好处就是所有声明部分皆可直接使用，无需return出去

注意：部分功能还不完善，如：name、render还需要单独加入script标签按compositionAPI方式编写

// setup 下还可以附加

defineProps defineEmits与组件应用

//子组件
{{msg}}
//父组件
我是btn：{{obj.text}}
、

defineExpose与组件应用

//子组件123//父组件

自定义指令相关

• created：在绑定元素的 attribute 或事件监听器被应用之前调用。在指令需要附加在普通的 v-on 事件监听器调用前的事件监听器中时，这很有用。

• beforeMount：当指令第一次绑定到元素并且在挂载父组件之前调用。

• mounted：在绑定元素的父组件被挂载后调用，大部分自定义指令都写在这里。

• beforeUpdate：在更新包含组件的 VNode 之前调用。

• updated：在包含组件的 VNode 及其子组件的 VNode 更新后调用。

• beforeUnmount：在卸载绑定元素的父组件之前调用

• unmounted：当指令与元素解除绑定且父组件已卸载时，只调用一次。

import{createApp}from\'vue\';constTest=createApp();Test.directive(\'my-directive\',{//在绑定元素的attribute前活动：慈云数据爆款香港服务器，CTG+CN2高速带宽、快速稳定、平均延迟10+ms 速度快，免备案，每月仅需19元！！ 点击查看//或事件监听器应用前调用created(el,binding,vnode,prevVnode){//下面会介绍各个参数的细节console.log(\'创建了\')},//在元素被插入到DOM前调用beforeMount(el,binding,vnode,prevVnode){},//在绑定元素的父组件//及他自己的所有子节点都挂载完成后调用mounted(el,binding,vnode,prevVnode){},//绑定元素的父组件更新前调用beforeUpdate(el,binding,vnode,prevVnode){},//在绑定元素的父组件//及他自己的所有子节点都更新后调用updated(el,binding,vnode,prevVnode){},//绑定元素的父组件卸载前调用beforeUnmount(el,binding,vnode,prevVnode){},//绑定元素的父组件卸载后调用unmounted(el,binding,vnode,prevVnode){}})exportdefaultTest.directive(\'my-directive\');

• 
el

  ：指令绑定到的元素。这可以用于直接操作 DOM。

• 
binding

  ：一个对象，包含以下属性。

• 
value

  ：传递给指令的值。例如在
  
v-my-directive=\"1 + 1\"

  中，值是
  
2

  。

• 
oldValue

  ：之前的值，仅在
  
beforeUpdate

  和
  
updated

  中可用。无论值是否更改，它都可用。

• 
arg

  ：传递给指令的参数 (如果有的话)。例如在
  
v-my-directive:foo

  中，参数是
  
\"foo\"

  。

• 
modifiers

  ：一个包含修饰符的对象 (如果有的话)。例如在
  
v-my-directive.foo.bar

  中，修饰符对象是
  
{ foo: true, bar: true }

  。

• 
instance

  ：使用该指令的组件实例。
  
dir

  ：指令的定义对象。

• 
vnode

  ：代表绑定元素的底层 VNode。

• 
prevNode

  ：之前的渲染中代表指令所绑定元素的 VNode。仅在
  
beforeUpdate

  和
  
updated

  钩子中可用。

应用

//setup外部调用//或者setup内部

对象字面量

app.directive(\'demo\',(el,binding)=>{console.log(binding.value.color)//=>\"white\"console.log(binding.value.text)//=>\"hello!\"})

到此，相信大家对“Vue3中的setup与自定义指令如何使用”有了更深的了解，不妨来实际操作一番吧！这里是服务器测评网网站，更多相关内容可以进入相关频道进行查询，关注我们，继续学习！