setup语法糖 最大好处就是所有声明部分皆可直接使用，无需return出去
注意：部分功能还不完善，如：name、render还需要单独加入script标签按compositionapi方式编写
// setup 下还可以附加3f1c4e4b6b16bbbd69b2ee476dc4f83a
setup语法糖独有 <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})// propsconst props = defineprops({ foo: string})// 事件const emit = defineemits(['change', 'delete'])// 自定义指令const vmydirective = { created(el, binding, vnode, prevvnode) { // 下面会介绍各个参数的细节 console.log('创建了') },}</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 '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与组件应用
// 子组件<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>
自定义指令相关created：在绑定元素的 attribute 或事件监听器被应用之前调用。在指令需要附加在普通的 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 './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!"})
以上就是vue3中的setup与自定义指令怎么使用的详细内容。