Der größte Vorteil besteht darin, dass alle Deklarationsteile direkt ohne Rückgabe verwendet werden können
Hinweis: Einige Funktionen wie Name und Render sind noch nicht vollständig, und Skript-Tags müssen separat hinzugefügt und in die CompositionAPI geschrieben werden method
// setup Sie können auch
creat ed:at Wird aufgerufen, bevor das Attribut oder der Ereignis-Listener des gebundenen Elements angewendet wird. Dies ist nützlich, wenn eine Direktive an einen Ereignis-Listener angehängt werden muss, bevor der normale v-on-Ereignis-Listener aufgerufen wird.
beforeMount: Wird aufgerufen, wenn die Direktive zum ersten Mal an ein Element gebunden wird und bevor die übergeordnete Komponente gemountet wird.
<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 }) // props const props = defineProps({ foo: String }) // 事件 const emit = defineEmits(['change', 'delete']) // 自定义指令 const vMyDirective = { created(el, binding, vnode, prevVnode) { // 下面会介绍各个参数的细节 console.log('创建了') }, } </script>
el
: Das Element, an das die Direktive gebunden ist. Dies kann verwendet werden, um das DOM direkt zu manipulieren.
binding
: Ein Objekt, das die folgenden Eigenschaften enthält.
value
: Der an die Direktive übergebene Wert. Beispielsweise ist in v-my-directive="1 + 1"
der Wert 2
. 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
oldValue
: Der vorherige Wert, nur verfügbar in beforeUpdate
und updated
. Es ist verfügbar, unabhängig davon, ob sich der Wert ändert oder nicht. arg
: Die an den Befehl übergebenen Argumente (falls vorhanden). In v-my-directive:foo
lautet der Parameter beispielsweise "foo"
.
modifikatoren
: Ein Objekt, das Modifikatoren enthält (falls vorhanden). Beispielsweise ist in v-my-directive.foo.bar
das Modifikatorobjekt { foo: true, bar: true
.
instance
: Die Komponenteninstanz, die diese Direktive verwendet. dir
: Das Definitionsobjekt der Direktive. 🎜🎜🎜🎜🎜vnode
: Stellt den zugrunde liegenden VNode des gebundenen Elements dar. 🎜🎜🎜🎜prevNode
: Der VNode, der das Element darstellt, an das die Anweisung im vorherigen Rendering gebunden ist. Nur in den Hooks beforeUpdate
und updated
verfügbar. 🎜🎜🎜🎜🎜Anwendung🎜🎜// 子组件 <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> 、
// 子组件 <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>
Das obige ist der detaillierte Inhalt vonSo verwenden Sie Setup- und benutzerdefinierte Anweisungen in Vue3. Für weitere Informationen folgen Sie bitte anderen verwandten Artikeln auf der PHP chinesischen Website!