Vue3基础用法

前言

• 在Vue3中，相对于Vue2来说，有很多的方法都是一样的，只是使用的时候不同。

VueRouter

VueRouter中总共有八个钩子，常用的有三个createRouter、beforeEach、afterEach，使用方法如下。

import { createRouter, createWebHistory } from 'vue-router'
import Home from '../views/Home.vue'

const routes = [
  {
    path: '/',
    name: 'Home',
    component: Home
  },
  {
    path: '/about',
    name: 'About',
    // route level code-splitting
    // this generates a separate chunk (about.[hash].js) for this route
    // which is lazy-loaded when the route is visited.
    component: () => import(/* webpackChunkName: "about" */ '../views/About.vue')
  }
]

const router = createRouter({
  history: createWebHistory(process.env.BASE_URL),
  routes
})

export default router

component引入有两种方法一种是正常的import Home from '../views/Home.vue'还有一种就是懒加载引入了。 在这之中也可使用在每个对象里添加meta或者是白名单进行路由拦截，需要用到router.beforeEach

// 挂载路由守卫
router.beforeEach((to, from, next) => {
  // to and from are both route objects. must call `next`.
  if (to.path === '/login') return next()
  const tokenStr = store.state.data.token
  if (!tokenStr) return next('/login')
  next()
})

父子组件传递

父子间向子组件传递数据

<template>
    <div>
        订单管理
        <Welcome :msg="total"></Welcome>
    </div>
</template>
<script>
import Welcome from '../../components/Welcome.vue'
import {reactive,ref} from 'vue'
export default {
    components:{
        Welcome
    },
    setup(props) {
        const total = ref('父组件传递的值')
        return {
            total
        }
    }
}
</script>
<style>
    
</style>

子组件接受父组件传递的数据

• 运用vue中defineProps去接收父组件传递过来的数据

<template>
    <div class="topHanders">
        <span>{{msg}}</span>
    </div>
</template>

<script >
import { defineProps, reactive,ref } from 'vue'
  export default{
    props:['msg'],
    setup(props){
        
    }
  }
  
</script>

<style>
</style>

子组件向父组件传递数据

<template>
    <div class="topHanders">
        <span @click="toUp">{{msg}}</span>
    </div>
</template>

<script >
import { defineProps, reactive,ref,onMounted} from 'vue'
  export default{
    props:['msg'],
    setup(props,{emit}){
        const toUp = ()=>{
            emit('fn',123)
        }
        return{
          toUp
        }
    }
  }
  
</script>

<style scoped>
</style>

父组件接受子组件的数据

<template>
    <div>
        <Welcome :msg="total" @fn="func"></Welcome>
    </div>
</template>
<script>
import Welcome from '../../components/Welcome.vue'
import {reactive,ref} from 'vue'
export default {
    components:{
        Welcome
    },
    setup(props) {
        const total = ref('父组件传递的值')
        const func = (val)=>{
            console.log(val)
        }
        return {
            total,
            func
        }
    }
}
</script>
<style>
    
</style>