Vue3에서 설정 및 사용자 정의 지침을 사용하는 방법-View.js-php.cn

Vue3에서 설정 및 사용자 정의 지침을 사용하는 방법

WBOY

풀어 주다： 2023-05-14 17:01:18

앞으로

1550명이 탐색했습니다.

설정 구문 설탕

가장 큰 장점은 모든 선언 부분을 반환하지 않고 직접 사용할 수 있다는 것입니다.

참고: 이름 및 렌더링과 같은 일부 기능은 아직 완료되지 않았습니다. 또한 별도의 스크립트 태그를 추가하고 에 작성해야 합니다. CompositionAPI 메소드

// setup 또한 첨부할 수 있습니다. 지침

creat ed：at 바인딩된 요소의 속성 또는 이벤트 리스너가 적용되기 전에 호출됩니다. 이는 일반 v-on 이벤트 리스너가 호출되기 전에 이벤트 리스너에 지시문을 추가해야 할 때 유용합니다.

beforeMount: 지시어가 요소에 처음 바인딩될 때와 상위 구성 요소가 마운트되기 전에 호출됩니다.

mounted: 바인딩된 요소의 상위 구성 요소가 마운트된 후에 호출됩니다. 대부분의 사용자 지정 지침이 여기에 기록됩니다.

<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: 지시문이 바인딩되는 요소입니다. 이는 DOM을 직접 조작하는 데 사용할 수 있습니다.
바인딩: 다음 속성을 포함하는 개체입니다.

value: 지시문에 전달된 값입니다. 예를 들어 v-my-directive="1 + 1"에서 값은 2입니다.

oldValue

beforeUpdate

updated

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
arg: 명령에 전달된 인수(있는 경우). 예를 들어 v-my-directive:foo에서 매개변수는 "foo"입니다.

modifiers: 수정자(있는 경우)를 포함하는 개체입니다. 예를 들어 v-my-directive.foo.bar에서 수정자 개체는 { foo: true, bar: true }입니다.

instance: 이 지시어를 사용하는 구성 요소 인스턴스입니다. dir: 지시문의 정의 개체입니다.

vnode

prevNode

beforeUpdate

updated

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

로그인 후 복사

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

로그인 후 복사

위 내용은 Vue3에서 설정 및 사용자 정의 지침을 사용하는 방법의 상세 내용입니다. 자세한 내용은 PHP 중국어 웹사이트의 기타 관련 기사를 참조하세요!