Vue3 でのセットアップとカスタム命令の使用方法

setup 構文シュガー

最大の利点は、すべての宣言部分を返さずに直接使用できることです。

注: 一部の関数はまだ完成していません。たとえば、name と render は次のようにする必要があります。タグは、compositionAPI メソッドに従って記述されます。

// 3f1c4e4b6b16bbbd69b2ee476dc4f83a

setup syntactic Sugar unique

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

## を追加することもできます。セットアップの

#defineProps defineEmits はコンポーネント アプリケーションに関連しています

// 子组件
<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> 
、

defineExpose はコンポーネント アプリケーションに関連しています

// 子组件
<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>

カスタム ディレクティブ

#created: in バインドされた要素の属性またはイベント リスナーが適用される前に呼び出されます。これは、通常の 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 フックでのみ使用できます。

アプリケーション

<template>
  <div class="home" v-test>
  </div>
</template>
//setup 外部调用
<script>
// 指令必须 vXxx 这样书写
import vTest from &#39;./TestDirective&#39;
export default defineComponent({
   directives: {
      test:vTest,
    },
  setup(props) {
    // console.log(&#39;Test&#39;,vTest)
    
    return {
   
    };
  } 
})
</script>
//或者 setup内部
<script setup>
import vTest from &#39;./TestDirective&#39;
</script>

オブジェクト リテラル

<div v-demo="{ color: &#39;white&#39;, text: &#39;hello!&#39; }"></div>
 
app.directive(&#39;demo&#39;, (el, binding) => {
  console.log(binding.value.color) // => "white"
  console.log(binding.value.text) // => "hello!"
})

以上がVue3 でのセットアップとカスタム命令の使用方法の詳細内容です。詳細については、PHP 中国語 Web サイトの他の関連記事を参照してください。