Halo
发布于 2023-11-29 / 87 阅读 / 0 评论 / 0 点赞

vue setup 语法糖常见用法

获取this

import { getCurrentInstance } from 'vue'
const that = getCurrentInstance()

获取路由

// 跳路由
import router from "@/router/index"
const routerpath = () => {
    router.push('/Find')
    console.log(route.query.id);
    console.log(route.params.id);
}

// 获取路由参数
import { useRoute } from 'vue-router'
const route = useRoute()

定义props

import { defineProps } from 'vue';
const props = defineProps(["title"]);

// 或者
import { defineProps } from 'vue';
const props = defineProps({
    title: String, // 可以设置传来值的类型
})

定义emit

import { defineEmits } from 'vue'
  
// 定义两个方法 change 和 delete
const emit = defineEmits(['change', 'delete'])
  
const handleClick=()=>{
    emit('change', 5); // 传给父组件的值的方法
}
  
const handleClickDel=()=>{
  emit('delete', 8); // 传给父组件的值的方法
}

定义响应变量、函数、监听、计算属性computed

import { ref,computed,watchEffect } from 'vue';

const count = ref(0);

const addCount=()=>{
    count.value++; 
} 

const howCount=computed(()=>"现在count值为:"+count.value);

watchEffect(()=>console.log(count.value)); 

评论