How to use setup and custom instructions in Vue3-Vue.js-php.cn

setup syntactic sugar The biggest advantage is that all declaration parts can be used directly without return.

Note: Some functions are not yet complete, such as: name and render need to be added separately. Tags are written according to the compositionAPI method

// You can also add

setup syntactic sugar unique 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('创建了') }, } Copy after login defineProps under setup defineEmits is related to the component application

// 子组件 {{ msg }} 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') } // 父组件 我是 btn：{{ obj.text }} import HelloWorld from '../components/HelloWorld.vue'; import { ref ,reactive,toRefs } from 'vue' const obj = reactive({ id: 0, text: '小红' }) const changeP=(e)=>{ console.log(e) } 、 Copy after login defineExpose is related to the component application

// 子组件 123 const testPose =()=>{ console.log('子组件暴露方法') } defineExpose({ testPose }) // 父组件 import HelloWorld from '../components/HelloWorld.vue'; import { ref } from 'vue' // setup函数的话可以从context上查找 const helloSon = ref(null); const testEpose = () => { helloSon.value.testPose(); } Copy after login custom directive created: in Called before the bound element's attribute or event listener is applied. This is useful when a directive needs to be appended to an event listener before the normal v-on event listener is called.

beforeMount: Called when the directive is bound to the element for the first time and before the parent component is mounted.

mounted: Called after the parent component of the bound element is mounted. Most of the custom instructions are written here.

beforeUpdate: Called before updating the VNode containing the component.

updated: Called after the containing component’s VNode and the VNodes of its subcomponents are updated.

beforeUnmount: Called before unmounting the parent component of the bound element

unmounted: When the directive is unbound from the element and the parent component has been unmounted , it is only called once.

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'); Copy after login el : The element to which the directive is bound. This can be used to directly manipulate the DOM.

binding : An object containing the following properties.

value : The value passed to the directive. For example, in v-my-directive="1 1" , the value is 2 .

oldValue : The previous value, only available in beforeUpdate and updated . It is available whether the value changes or not.

arg : The arguments passed to the directive (if any). For example, in v-my-directive:foo , the parameter is "foo" .

modifiers : An object containing modifiers (if any). For example, in v-my-directive.foo.bar , the modifier object is { foo: true, bar: true } .

instance : The component instance using this directive. dir : The definition object of the instruction.

vnode : Represents the underlying VNode of the bound element.

prevNode : The VNode representing the element to which the directive is bound in the previous rendering. Only available in beforeUpdate and updated hooks.

Application

//setup 外部调用 // 指令必须 vXxx 这样书写 import vTest from './TestDirective' export default defineComponent({ directives: { test:vTest, }, setup(props) { // console.log('Test',vTest) return { }; } }) //或者 setup内部 import vTest from './TestDirective' Copy after login Object literal

app.directive('demo', (el, binding) => { console.log(binding.value.color) // => "white" console.log(binding.value.text) // => "hello!" }) Copy after login