Vue3中關于setup與自定義指令詳解

更新時間：2023年04月14日 14:34:21 作者：我是小白855

這篇文章主要介紹了Vue3中關于setup與自定義指令，本文給大家介紹的非常詳細，對大家的學習或工作具有一定的參考借鑒價值,需要的朋友可以參考下

setup語法糖

最大好處就是所有聲明部分皆可直接使用，無需return出去

注意：部分功能還不完善，如：name、render還需要單獨加入script標簽按compositionAPI方式編寫

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

setup語法糖獨有

<script setup>
import { ref ,reactive,toRefs } from 'vue'
const a = 1;
const num = ref(99)  // 基本數(shù)據(jù)類型
const user = reactive({ // 引用數(shù)據(jù)類型
  age:11
})
// 解構能獲取響應式屬性 {}解構 toRefs保留響應式
const { age } = toRefs(user)
// 導出
defineExpose({
  a
})
// props
const props = defineProps({
  foo: String
})
// 事件
const emit = defineEmits(['change', 'delete'])
// 自定義指令
const vMyDirective = {
  created(el, binding, vnode, prevVnode) {
    // 下面會介紹各個參數(shù)的細節(jié)
    console.log('創(chuàng)建了')
  },
}
</script>

defineProps defineEmits與組件應用

// 子組件
<template>
  <div class="hello">
    <h1>{{ msg }}</h1>
    <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函數(shù)的話可以從context上查找
const helloSon = ref(null);
const testEpose = () => {
  helloSon.value.testPose();
}
</script>

自定義指令相關

created：在綁定元素的 attribute 或事件監(jiān)聽器被應用之前調用。在指令需要附加在普通的 v-on 事件監(jiān)聽器調用前的事件監(jiān)聽器中時，這很有用。
beforeMount：當指令第一次綁定到元素并且在掛載父組件之前調用。
mounted：在綁定元素的父組件被掛載后調用，大部分自定義指令都寫在這里。
beforeUpdate：在更新包含組件的 VNode 之前調用。
updated：在包含組件的 VNode 及其子組件的 VNode 更新后調用。
beforeUnmount：在卸載綁定元素的父組件之前調用
unmounted：當指令與元素解除綁定且父組件已卸載時，只調用一次。

import { createApp } from 'vue';
const Test = createApp();
Test.directive('my-directive', {
    // 在綁定元素的 attribute 前
    // 或事件監(jiān)聽器應用前調用
    created(el, binding, vnode, prevVnode) {
        // 下面會介紹各個參數(shù)的細節(jié)
        console.log('創(chuàng)建了')
    },
    // 在元素被插入到 DOM 前調用
    beforeMount(el, binding, vnode, prevVnode) { },
    // 在綁定元素的父組件
    // 及他自己的所有子節(jié)點都掛載完成后調用
    mounted(el, binding, vnode, prevVnode) { },
    // 綁定元素的父組件更新前調用
    beforeUpdate(el, binding, vnode, prevVnode) { },
    // 在綁定元素的父組件
    // 及他自己的所有子節(jié)點都更新后調用
    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：傳遞給指令的參數(shù) (如果有的話)。例如在 v-my-directive:foo 中，參數(shù)是 "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與自定義指令的文章就介紹到這了,更多相關Vue3 setup內容請搜索腳本之家以前的文章或繼續(xù)瀏覽下面的相關文章希望大家以后多多支持腳本之家！

您可能感興趣的文章: