VUE相关文档

标题	链接
Vue3 中文文档	相关链接🔗
Vue-cli 官方中文文档	相关链接🔗
vue-devtools	相关链接🔗
Vite 官方文档	相关链接🔗
Vite 官方中文文档	相关链接🔗
Vite 源码学习	相关链接🔗
Vue3+ & Vue-CLI3+ 开发生态圈资讯	相关链接🔗

日常工作中的常见场景

props 如何获取

vue3 的 setup 中没有this，如何获取父组件传入的 props呢？

<script lang='ts'>
import { defineComponent } from 'vue';
export default defineComponent({
    props: {
        title: String
    },
    setup(props){
        console.log(props.title);
    }
})
</script>

$refs 如何获取

场景：vue2 可以使用 this.$refs.childCamp 获取到子组件的实例，vue3 中应该如何使用呢？

<template>
    <el-dialog ref="detailDialog"></el-dialog>
</template>

<script lang='ts'>
import { defineComponent, ref } from 'vue';
export default defineComponent({
    setup(){
        const detailDialog = ref();
        detailDialog.value.open();  // 调用子组件的open方法
        return {
            detailDialog
        }
    }
})
</script>

如何路由跳转

场景：vue2 路由跳转时可以使用 this.$router.push(path) 跳转到制定路由， vue3 应该如何实现路由跳转呢？

<script>
import { useRoute, useRouter } from 'vue-router'
export default defineComponent({
    setup(){
        const router = useRouter();
        const toPage = () => {
            router.push(path);
        }
    }
})
</script>

如何使用emit

// 父组件 
<template>
    <childDialog @send="getMessage"></childDialog>
</template>
<script>
import { defineComponent } from 'vue';
import childDialog from './childDialog.vue';
components: {
    childDialog
},
export default defineComponent({
    setup(props){
        const getMessage = (message) => {
            console.log(`message from children is ${message}`)
        };
        return {
            getMessage
        }
    }
})
</script>

// 子组件<childDialog>
<template>
    <div @click="sendMsg"></div>
</template>
<script>
import { defineComponent } from 'vue';
export default defineComponent({
    emits: ['copySuccess'],
    setup(props, { emit }){
        const sendMsg = () => {
            emit('send', {
                message: 'send message by emit.'
            });
        };
        return {
            sendMsg
        }
    }
})
</script>