您好,登錄后才能下訂單哦!
本篇內(nèi)容主要講解“Vue3中的setup與自定義指令如何使用”,感興趣的朋友不妨來看看。本文介紹的方法操作簡單快捷,實(shí)用性強(qiáng)。下面就讓小編來帶大家學(xué)習(xí)“Vue3中的setup與自定義指令如何使用”吧!
最大好處就是所有聲明部分皆可直接使用,無需return出去
注意:部分功能還不完善,如:name、render還需要單獨(dú)加入script標(biāo)簽按compositionAPI方式編寫
// setup 下還可以附加<script>
<script setup> import { ref ,reactive,toRefs } from 'vue' const a = 1; const num = ref(99) // 基本數(shù)據(jù)類型 const user = reactive({ // 引用數(shù)據(jù)類型 age:11 }) // 解構(gòu)能獲取響應(yīng)式屬性 {}解構(gòu) toRefs保留響應(yīng)式 const { age } = toRefs(user) // 導(dǎo)出 defineExpose({ a }) // props const props = defineProps({ foo: String }) // 事件 const emit = defineEmits(['change', 'delete']) // 自定義指令 const vMyDirective = { created(el, binding, vnode, prevVnode) { // 下面會(huì)介紹各個(gè)參數(shù)的細(xì)節(jié) console.log('創(chuàng)建了') }, } </script>
defineProps defineEmits與組件應(yīng)用
// 子組件 <template> <div class="hello"> <h3>{{ msg }}</h3> <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與組件應(yīng)用
// 子組件 <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)聽器被應(yīng)用之前調(diào)用。在指令需要附加在普通的 v-on 事件監(jiān)聽器調(diào)用前的事件監(jiān)聽器中時(shí),這很有用。
beforeMount:當(dāng)指令第一次綁定到元素并且在掛載父組件之前調(diào)用。
mounted:在綁定元素的父組件被掛載后調(diào)用,大部分自定義指令都寫在這里。
beforeUpdate:在更新包含組件的 VNode 之前調(diào)用。
updated:在包含組件的 VNode 及其子組件的 VNode 更新后調(diào)用。
beforeUnmount:在卸載綁定元素的父組件之前調(diào)用
unmounted:當(dāng)指令與元素解除綁定且父組件已卸載時(shí),只調(diào)用一次。
import { createApp } from 'vue'; const Test = createApp(); Test.directive('my-directive', { // 在綁定元素的 attribute 前 // 或事件監(jiān)聽器應(yīng)用前調(diào)用 created(el, binding, vnode, prevVnode) { // 下面會(huì)介紹各個(gè)參數(shù)的細(xì)節(jié) console.log('創(chuàng)建了') }, // 在元素被插入到 DOM 前調(diào)用 beforeMount(el, binding, vnode, prevVnode) { }, // 在綁定元素的父組件 // 及他自己的所有子節(jié)點(diǎn)都掛載完成后調(diào)用 mounted(el, binding, vnode, prevVnode) { }, // 綁定元素的父組件更新前調(diào)用 beforeUpdate(el, binding, vnode, prevVnode) { }, // 在綁定元素的父組件 // 及他自己的所有子節(jié)點(diǎn)都更新后調(diào)用 updated(el, binding, vnode, prevVnode) { }, // 綁定元素的父組件卸載前調(diào)用 beforeUnmount(el, binding, vnode, prevVnode) { }, // 綁定元素的父組件卸載后調(diào)用 unmounted(el, binding, vnode, prevVnode) { } }) export default Test.directive('my-directive');
el
:指令綁定到的元素。這可以用于直接操作 DOM。
binding
:一個(gè)對象,包含以下屬性。
value
:傳遞給指令的值。例如在 v-my-directive="1 + 1"
中,值是 2
。
oldValue
:之前的值,僅在 beforeUpdate
和 updated
中可用。無論值是否更改,它都可用。
arg
:傳遞給指令的參數(shù) (如果有的話)。例如在 v-my-directive:foo
中,參數(shù)是 "foo"
。
modifiers
:一個(gè)包含修飾符的對象 (如果有的話)。例如在 v-my-directive.foo.bar
中,修飾符對象是 { foo: true, bar: true }
。
instance
:使用該指令的組件實(shí)例。dir
:指令的定義對象。
vnode
:代表綁定元素的底層 VNode。
prevNode
:之前的渲染中代表指令所綁定元素的 VNode。僅在 beforeUpdate
和 updated
鉤子中可用。
應(yīng)用
<template> <div class="home" v-test> </div> </template> //setup 外部調(diào)用 <script> // 指令必須 vXxx 這樣書寫 import vTest from './TestDirective' export default defineComponent({ directives: { test:vTest, }, setup(props) { // console.log('Test',vTest) return { }; } }) </script> //或者 setup內(nèi)部 <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與自定義指令如何使用”有了更深的了解,不妨來實(shí)際操作一番吧!這里是億速云網(wǎng)站,更多相關(guān)內(nèi)容可以進(jìn)入相關(guān)頻道進(jìn)行查詢,關(guān)注我們,繼續(xù)學(xué)習(xí)!
免責(zé)聲明:本站發(fā)布的內(nèi)容(圖片、視頻和文字)以原創(chuàng)、轉(zhuǎn)載和分享為主,文章觀點(diǎn)不代表本網(wǎng)站立場,如果涉及侵權(quán)請聯(lián)系站長郵箱:is@yisu.com進(jìn)行舉報(bào),并提供相關(guān)證據(jù),一經(jīng)查實(shí),將立刻刪除涉嫌侵權(quán)內(nèi)容。