Le plus grand avantage est que toutes les parties de la déclaration peuvent être utilisées directement sans retour
Remarque : certaines fonctions ne sont pas encore complètes, comme le nom et le rendu. Vous devez également ajouter des balises de script distinctes et les écrire dans le fichier. CompositionAPI Method
// Configuration Vous pouvez également attacher & lt; script & gt;
<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>defineprops DefineeMits sont liés aux applications de composants
// 子组件
<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>
、defineExpose sont liées aux applications de composants
// 子组件
<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>créé：à Appelé avant que l'attribut ou l'écouteur d'événement de l'élément lié ne soit appliqué. Ceci est utile lorsqu'une directive doit être ajoutée à un écouteur d'événement avant que l'écouteur d'événement v-on normal ne soit appelé.
beforeMount : Appelé lorsque la directive est liée pour la première fois à un élément et avant que le composant parent ne soit monté.
Mounted : Appelé après le montage du composant parent de l'élément lié. La plupart des instructions personnalisées sont écrites ici.
beforeUpdate : Appelé avant de mettre à jour le VNode contenant le composant.
updated : appelé après la mise à jour du VNode du composant conteneur et du VNode de son sous-composant.
beforeUnmount : Appelé avant de démonter le composant parent de l'élément lié
unmounted : Appelé une seule fois lorsque la directive n'est pas liée à l'élément et que le composant parent a été démonté.
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 : L'élément auquel la directive est liée. Cela peut être utilisé pour manipuler directement le DOM. 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
binding : Un objet contenant les propriétés suivantes. value : La valeur passée à la directive. Par exemple, dans v-my-directive="1 + 1", la valeur est 2. oldValue : La valeur précédente, disponible uniquement dans beforeUpdate et mis à jour. Il est disponible que la valeur change ou non. 🎜🎜🎜🎜arg : Les arguments passés à la commande (le cas échéant). Par exemple, dans v-my-directive:foo, le paramètre est "foo". 🎜🎜🎜🎜modifiers : Un objet contenant des modificateurs (le cas échéant). Par exemple, dans v-my-directive.foo.bar, l'objet modificateur est { foo : true, bar : true . 🎜🎜🎜🎜instance : L'instance du composant utilisant cette directive. dir : L'objet de définition de la directive. 🎜🎜🎜🎜🎜vnode : représente le VNode sous-jacent de l'élément lié. 🎜🎜🎜🎜prevNode : Le VNode représentant l'élément auquel l'instruction est liée dans le rendu précédent. Uniquement disponible dans les hooks beforeUpdate et mis à jour. 🎜🎜🎜🎜🎜Application🎜🎜<template>
<div class="home" v-test>
</div>
</template>
//setup 外部调用
<script>
// 指令必须 vXxx 这样书写
import vTest from './TestDirective'
export default defineComponent({
directives: {
test:vTest,
},
setup(props) {
// console.log('Test',vTest)
return {
};
}
})
</script>
//或者 setup内部
<script setup>
import vTest from './TestDirective'
</script><div v-demo="{ color: 'white', text: 'hello!' }"></div>
app.directive('demo', (el, binding) => {
console.log(binding.value.color) // => "white"
console.log(binding.value.text) // => "hello!"
})Ce qui précède est le contenu détaillé de. pour plus d'informations, suivez d'autres articles connexes sur le site Web de PHP en chinois!
![[Web front-end] Démarrage rapide de Node.js](https://img.php.cn/upload/course/000/000/067/662b5d34ba7c0227.png)
