Vue3中的setup与自定义指令怎么使用
setup语法糖
最大好处就是所有声明部分皆可直接使用,无需return出去
注意:部分功能还不完善,如:name、render还需要单独加入script标签按compositionAPI方式编写
// setup 下还可以附加
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 }) // props const 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与自定义指令怎么使用的详细内容,更多请关注其它相关文章!