vue3 基本使用

import {ref,reactive,toRef,toRefs} from 'vue'
ref("zhangjing") 定义基本数据类型 
reactive({}||[]) 定义对象或者数组
最后return的时候使用...toRefs(listData) 
const props = defineProps([ 
 'name', 
 'userInfo', 
 'tags' 
 ]) 接受props 

全局注册组件 

main.js内引入组件 

import { createApp } from 'vue';
import App from './App.vue';
import Img from "@/components/img.vue";
const app = createApp(App);
app.component('Img', Img);

import Img from "@/components/img.vue"; 

const app = createApp(App);

app.component('Img', Img);  挂载 

页面直接使用 <Img></Img>

v-for循环遍历data内数组的图片路径丢失

 img: require('@/assets/images/icon_gps.png')  加上require 就可以解决了。

vue3挂载创建路由

创建router文件下面创建index.js

引入vue-router内的方法 

import { createRouter, createWebHistory } from 'vue-router'；

import { createRouter, createWebHistory } from 'vue-router';
// import { createRouter,  createWebHashHistory,  createWebHistory, } from 'vue-router'
import indexHome from '../views/indexHome.vue';

const routes = [
  {
    path: '/',
    name: 'home',
    component: indexHome,
  },
  {
    path: '/jiaoTong',
    name: 'jiaoTong',
    component: () => import(/* webpackChunkName: "about" */ '../views/jiaoTong.vue'),
    children: [ // 子路由
            {
                path: 'about',
                name: 'about',
                component: () => import('../views/about.vue'),
            }
        ]
  },
  
]

const router = createRouter({
  base: '/dxal',
  mode: 'history',
  // 创建history模式的路由
  history: createWebHistory(process.env.BASE_URL),
  // 创建hash模式的路由
  // history: createWebHashHistory(process.env.BASE_URL),
  routes
})

export default router

创建 

const routes = [

  {

    path: '/',

    name: 'home',

    component: indexHome,

  },

  {

    path: '/jiaoTong',

    name: 'jiaoTong',

    component: () => import(/* webpackChunkName: "about" */ '../views/jiaoTong.vue')

  },

]

const router = createRouter({

  base: '/dxal', // 基础路径

  mode: 'history', // 路由模式

  history: createWebHistory(process.env.BASE_URL),

  // history: createWebHashHistory(process.env.BASE_URL),

  routes // 自己创建的路由内容

})；

导出 

export default router

main.js 挂载router 

import router from './router'; // 引入router 

const app = createApp(App);

app.use(router);

import { createApp } from 'vue';
import App from './App.vue';
import router from './router';
const app = createApp(App);
app.use(router).mount('#app');

vue3跳转路由

 import { useRouter } from "vue-router";

const router = useRouter();

 router.push({ name: 路由名字, params: {} });

<router-link to="/路由路径er-link>

import { useRouter } from "vue-router";
const router = useRouter();
const go = (path) => {
  console.log(path);
  router.push({ name: path, params: {} });
  router.push({ path: path, query: {} }); // 两种跳转方法
};

 <router-link to="/index">标签跳转</router-link>

 vue3路由接受参数

接受参数 params

import { useRoute } from 'vue-router';

const route = useRoute();

console.log(route.params.id);

import { useRoute } from 'vue-router';
const route = useRoute();
console.log(route.params.id); // 需要在路由里面加占位符
{
    path: '/daXingAnLing/gongDian:id',
    name: 'daXingAnLingGongDian',
    component: () => import(/* webpackChunkName: "about" */ '../views/daXingAnLing/gongDian.vue')
  },

接受参数 query

import { useRoute } from 'vue-router';

const route = useRoute();

console.log(route.query.id);

import { useRoute } from 'vue-router';
const route = useRoute();
console.log(route.query.id);

vue3父子组件传参

父组件

// 父组件
<template>
  <Img :money="money" :car="car" />
  <router-view />
</template>
<script setup>
import { ref } from "vue";
const money = ref(123456);
const car = ref("瘪三");
</script>

// 子组件
<template>
    <div id="qys_banner">
        <img src="@/assets/images/suihua_qys.png" width="100%" />
    </div>
</template>
<script setup>
const props = defineProps({
    money: Number,
    car: String,
})
console.log(props.car,props,props.money);
</script>

 子组件调用父组件方法

父组件

// 父组件
<template>
  <Img  @changeMoney="change" />
  <router-view />
</template>
<script setup>
const change = (name) => {
  console.log(name);
}
</script>

// 子组件
<template>
    <div id="qys_banner" @click="change">
        <img src="@/assets/images/suihua_qys.png" width="100%" />
    </div>
</template>
<script setup>
const emit = defineEmits(['changeMoney']) //核心代码
const change = () => {
    emit('changeMoney', "我三哥傻逼")
}
</script>

vue3依赖注入 - provide 和 inject

传值

// 父组件
<template>
  <Img />
  <router-view />
</template>
<script setup>
import { provide, ref } from "vue"
const money = ref("三哥傻逼")
provide('money', money)
</script>

// 子组件
<template>
    <div id="qys_banner">
        <img src="@/assets/images/suihua_qys.png" width="100%" />
        <!-- 直接引用可以出值，log出来的不是值 -->
        {{ money }}
    </div>
</template>
<script setup>
import { inject } from 'vue'
const money = inject('money')
console.log(money);
</script>

 

 

传方法

// 父组件
<template>
  <Img />
  <router-view />
</template>
<script setup>
import { provide } from "vue"
                  // 接受参数
const changeMoney = (name) => {
  console.log("三哥傻逼",name);
}
provide('changeMoney', changeMoney)
</script>
// 子组件 
<template> 
                                            // 可以传递参数
    <div id="qys_banner" @click="changeMoney('是的没错')"> 
        <img src="@/assets/images/suihua_qys.png" width="100%" />
        <!-- 直接引用可以出值，log出来的不是值 -->
    </div>
</template>
<script setup>
import { inject } from 'vue'
const changeMoney = inject('changeMoney')
</script>

 

 

 vue3 ref获取元素调用子组件方法

获取元素

<template>
  <Img />
  <div @click="adds" ref="hRef">测试</div>
  <router-view />
</template>
<script setup>
import { ref, onMounted } from "vue"
const hRef = ref(null);

const adds = () => {
  console.log(hRef.value);
}
</script>

调用子组件方法

// 父组件
<template>
  <Img ref="hRef" />
  <div @click="adds">测试</div>
  <router-view />
</template>
<script setup>
import { ref, onMounted } from "vue"
const hRef = ref(null);
const adds = () => {
  hRef.value.add();
}
</script>

// 子组件
<template>
    <div id="qys_banner">
        <img src="@/assets/images/suihua_qys.png" width="100%" />
    </div>
</template>
<script setup>
const add = () => {
    console.log("三哥傻逼篮子");
}
defineExpose({ add }); // 很关键将方法暴露出来
</script>