defineExpose與組件應(yīng)用

// 子組件

 

 
const testPose =()=>{
  console.log('子組件暴露方法')
}
defineExpose({
  testPose
})

 
// 父組件


import HelloWorld from '../components/HelloWorld.vue';
import { ref } from 'vue'
// setup函數(shù)的話可以從context上查找
const helloSon = ref(null);
const testEpose = () => {
  helloSon.value.testPose();
}

自定義指令相關(guān)

• created：在綁定元素的 attribute 或事件監(jiān)聽器被應(yīng)用之前調(diào)用。在指令需要附加在普通的 v-on 事件監(jiān)聽器調(diào)用前的事件監(jiān)聽器中時，這很有用。

• beforeMount：當(dāng)指令第一次綁定到元素并且在掛載父組件之前調(diào)用。

• mounted：在綁定元素的父組件被掛載后調(diào)用，大部分自定義指令都寫在這里。

• beforeUpdate：在更新包含組件的 VNode 之前調(diào)用。

• updated：在包含組件的 VNode 及其子組件的 VNode 更新后調(diào)用。

• beforeUnmount：在卸載綁定元素的父組件之前調(diào)用

• unmounted：當(dāng)指令與元素解除綁定且父組件已卸載時，只調(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) {
        // 下面會介紹各個參數(shù)的細(xì)節(jié)
        console.log('創(chuàng)建了')
    },
    // 在元素被插入到 DOM 前調(diào)用
    beforeMount(el, binding, vnode, prevVnode) { },
    // 在綁定元素的父組件
    // 及他自己的所有子節(jié)點都掛載完成后調(diào)用
    mounted(el, binding, vnode, prevVnode) { },
    // 綁定元素的父組件更新前調(diào)用
    beforeUpdate(el, binding, vnode, prevVnode) { },
    // 在綁定元素的父組件
    // 及他自己的所有子節(jié)點都更新后調(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：一個對象，包含以下屬性。

• 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 鉤子中可用。

應(yīng)用

//setup 外部調(diào)用

//或者 setup內(nèi)部

import vTest from './TestDirective'

對象字面量