Vue3中的setup與自訂指令怎麼使用-Vue.js-PHP中文網

setup語法糖 最大好處就是所有宣告部分皆可直接使用，無需return出去

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

// setup 下還可以附加

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 }) // props const props = defineProps({ foo: String }) // 事件 const emit = defineEmits(['change', 'delete']) // 自定义指令 const vMyDirective = { created(el, binding, vnode, prevVnode) { // 下面会介绍各个参数的细节 console.log('创建了') }, } 登入後複製 defineProps defineEmits與元件應用

// 子组件 {{ msg }} 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') } // 父组件 我是 btn：{{ obj.text }} import HelloWorld from '../components/HelloWorld.vue'; import { ref ,reactive,toRefs } from 'vue' const obj = reactive({ id: 0, text: '小红' }) const changeP=(e)=>{ console.log(e) } 、 登入後複製 defineExpose與元件應用

// 子组件 123 const testPose =()=>{ console.log('子组件暴露方法') } defineExpose({ testPose }) // 父组件 import HelloWorld from '../components/HelloWorld.vue'; import { ref } from 'vue' // setup函数的话可以从context上查找 const helloSon = ref(null); const testEpose = () => { helloSon.value.testPose(); } 登入後複製 自訂指令相關 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 鉤子中可用。

應用

//setup 外部调用 // 指令必须 vXxx 这样书写 import vTest from './TestDirective' export default defineComponent({ directives: { test:vTest, }, setup(props) { // console.log('Test',vTest) return { }; } }) //或者 setup内部 import vTest from './TestDirective' 登入後複製 物件字面量

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