Vue3中的setup与自定义指令怎么使用

时间：2023-05-15 00:10

setup语法糖

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

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

// setup 下还可以附加<script>

setup语法糖独有

<script setup>import { ref ,reactive,toRefs } from 'vue'const a = 1;const num = ref(99)  // 基本数据类型const user = reactive({ // 引用数据类型  age:11})// 解构能获取响应式属性 {}解构 toRefs保留响应式const { age } = toRefs(user)// 导出defineExpose({  a})// propsconst props = defineProps({  foo: String})// 事件const emit = defineEmits(['change', 'delete'])// 自定义指令const vMyDirective = {  created(el, binding, vnode, prevVnode) {    // 下面会介绍各个参数的细节    console.log('创建了')  },}</script>

defineProps defineEmits与组件应用

// 子组件<template>  <div class="hello">    <h2>{{ msg }}</h2>    <slot name="btn">     </slot>    <button @click="chickMe"></button>  </div></template> <script setup>import { useSlots, useAttrs } from 'vue'; const slots = useSlots()const attrs = useAttrs()const props = defineProps({  msg: String})const emit = defineEmits(['change'])console.log(slots, attrs)const chickMe = ()=>{  emit('change','abc')} </script> // 父组件<template>  <div class="home" >    <HelloWorld msg="hello" atr="attrs" @change="changeP ">      <template #btn>        <div>我是 btn：{{ obj.text }}</div>      </template>    </HelloWorld>  </div></template> <script setup>import HelloWorld from '../components/HelloWorld.vue';import { ref ,reactive,toRefs } from 'vue' const obj = reactive({      id: 0,      text: '小红'    }) const changeP=(e)=>{      console.log(e)    }</script> 、

defineExpose与组件应用

// 子组件<template>  <div class="hello">        123  </div></template> <script setup> const testPose =()=>{  console.log('子组件暴露方法')}defineExpose({  testPose})</script> // 父组件<template>  <div class="home" v-test>    <HelloWorld  ref="helloSon"></HelloWorld>    <button @click="testEpose"></button>  </div></template><script setup>import HelloWorld from '../components/HelloWorld.vue';import { ref } from 'vue'// setup函数的话可以从context上查找const helloSon = ref(null);const testEpose = () => {  helloSon.value.testPose();}</script>

自定义指令相关

created：在绑定元素的 attribute 或事件监听器被应用之前调用。在指令需要附加在普通的 v-on 事件监听器调用前的事件监听器中时，这很有用。
beforeMount：当指令第一次绑定到元素并且在挂载父组件之前调用。
mounted：在绑定元素的父组件被挂载后调用，大部分自定义指令都写在这里。
beforeUpdate：在更新包含组件的 VNode 之前调用。
updated：在包含组件的 VNode 及其子组件的 VNode 更新后调用。
beforeUnmount：在卸载绑定元素的父组件之前调用
unmounted：当指令与元素解除绑定且父组件已卸载时，只调用一次。

import { createApp } from 'vue';const Test = createApp();Test.directive('my-directive', {    // 在绑定元素的 attribute 前    // 或事件监听器应用前调用    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) { }}) export default Test.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 钩子中可用。

应用

<template>  <div class="home" v-test>  </div></template>//setup 外部调用<script>// 指令必须 vXxx 这样书写import vTest from './TestDirective'export default defineComponent({   directives: {      test:vTest,    },  setup(props) {    // console.log('Test',vTest)        return {       };  } })</script>//或者 setup内部<script setup>import vTest from './TestDirective'</script>

对象字面量

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

以上就是Vue3中的setup与自定义指令怎么使用的详细内容，更多请关注Gxl网其它相关文章！