vue3 setup语法糖
生命周期
<script setup> import { onMounted, onUpdated, onUnmounted } from 'vue' onMounted(()=> { }) onUpdated(()=> { }) onUnmounted(()=> { }) </script> //函数式编程都需要先引入在使用,生命周期对比如下 onBeforeMount(() => { }) onMounted(() => { }) onBeforeUpdate(() => { }) onUpdated(() => { }) onBeforeUnmount(() => { }) onUnmounted(() => { }) onActivated(() => { }) onDeactivated(() => { }) onErrorCaptured(() => { })
获取dom节点
<template> <div ref="divDom"></div> </template> <script setup> import { onMounted, ref } from "vue"; const divDom = ref<HTMLElement|null>(null) onMounted(()=> { console.log(divDom.value) //获取dom节点 }) </script>
双向绑定
<template> <div> {{msg}} {{data.name}} </div> </template> <script setup> import { ref,reactive } from 'vue'; const msg = ref<string>('双向绑定') const data = reactive<any>({ //数据集合 可以是任意组合 name: '张三', age: 10 }) </script>
组件传值
const props = defineProps({ option: Object, id: { type: String, default: "echart-box", } });
父组件与子组件通信
//父组件 <template> <ComponentA ref="refA"/> </template> <script setup> import ComponentA from '@/components/component.vue' import { ref, onMounted } from 'vue' const comA = ref<InstanceType<typeof ComponentA>>() onMounted(()=> { ComponentA .value?.initBideo() }) </script> //子组件 <template> 子组件 </template> <script setup> const initBideo = () => { console.log('子组件方法') } defineExpose({ //将子组件属性暴露出去 initBideo }); </script>