So verwenden Sie Setup- und benutzerdefinierte Anweisungen in Vue3

Syntaktischer Zucker einrichten

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 3f1c4e4b6b16bbbd69b2ee476dc4f83a

setup syntax Sugar Unique anhängen individuelle Anleitung

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.

mount: Wird aufgerufen, nachdem die übergeordnete Komponente des gebundenen Elements gemountet wurde. Die meisten benutzerdefinierten Anweisungen werden hier geschrieben.
beforeUpdate: Wird vor dem Aktualisieren des VNode aufgerufen, der die Komponente enthält.
aktualisiert: Wird aufgerufen, nachdem der VNode der enthaltenden Komponente und die VNodes ihrer Unterkomponenten aktualisiert wurden.
beforeUnmount: Wird vor dem Aufheben der Bereitstellung der übergeordneten Komponente des gebundenen Elements aufgerufen.
unmount: Wird nur einmal aufgerufen, wenn die Direktive vom Element getrennt wird und die übergeordnete Komponente aufgehoben wurde.

• <script setup>
  import { ref ,reactive,toRefs } from &#39;vue&#39;
  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([&#39;change&#39;, &#39;delete&#39;])
  // 自定义指令
  const vMyDirective = {
    created(el, binding, vnode, prevVnode) {
      // 下面会介绍各个参数的细节
      console.log(&#39;创建了&#39;)
    },
  }
  </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 &#39;vue&#39;;
 
const slots = useSlots()
const attrs = useAttrs()
const props = defineProps({
  msg: String
})
const emit = defineEmits([&#39;change&#39;])
console.log(slots, attrs)
const chickMe = ()=>{
  emit(&#39;change&#39;,&#39;abc&#39;)
}
 
</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 &#39;../components/HelloWorld.vue&#39;;
import { ref ,reactive,toRefs } from &#39;vue&#39;
 const obj = reactive({
      id: 0,
      text: &#39;小红&#39;
    })
 const changeP=(e)=>{
      console.log(e)
    }
</script> 
、

🎜🎜 Objektliteral🎜🎜

// 子组件
<template>
  <div class="hello">
        123
  </div>
</template>
 
<script setup>
 
const testPose =()=>{
  console.log(&#39;子组件暴露方法&#39;)
}
defineExpose({
  testPose
})
</script>
 
// 父组件
<template>
  <div class="home" v-test>
    <HelloWorld  ref="helloSon"></HelloWorld>
    <button @click="testEpose"></button>
  </div>
</template>
<script setup>
import HelloWorld from &#39;../components/HelloWorld.vue&#39;;
import { ref } from &#39;vue&#39;
// 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!