一.组件以及组件传值
1.父传值给子组件
做法：子组件引入defineProps,通过fefineProps(自定义传入的值)，const 定义变量props接收fefineProps(自定义传入的值)-->得到的是一个对象，在子组件中可以通过props.自定义传入的值得到父组件传递的数据
父组件import引入该子组件,在template里定义的子组件动态绑定 ：自定义传入的值=父组件想要传递的数据
//在子组件中
<template>
<div>
我的资料（子组件）
</div>
<ul>
<li v-for="item in props.arr" :key="item.id">
{{ item.name }}
</li>
</ul>
<button>发送数据给父组件</button>
</template>
<script lang="ts" setup>
import { defineProps } from 'vue';
const props=defineProps(['arr'])
console.log(props.arr);
</script>
<style >
ul{
list-style: none;
}
</style>
在父组件中
<template>
<div>
<div>
<h3>个人中心(父组件传值)</h3>
</div>
<my-info :arr="lists"></my-info>
</div>
</template>
<script lang="ts" setup>
// ref,reactive用来定义响应式数据
import {ref,reactive} from 'vue'
import MyInfo from '@/components/MyInfo.vue';
let lists=ref([
{id:1,name:'玫瑰花'},
{id:2,name:'哈哈花'},
{id:3,name:'牛牛花'},
])
</script>
2.子组件传值给父组件
做法：在子组件里import 引入defineEmits，自定义事件const $emit=defineEmits(['自定义事件'])，写方法传递 const add=()=>{ $emit('emit-data',{message:"子组件传递的值"})}，在子组件标签绑定该方法传递@click=“add”；在父组件定义响应式数据赋传过来的值，写方法接收传递的值，let msg=ref("")；const rec=(message:string)=>{msg.value=message}；
在template子组件中使用该方法@自定义事件=“rec”
//子组件
<template>
<button @click="add">发送数据给父组件</button>
</template>
<script lang="ts" setup>
import { defineEmits } from 'vue';
// 子传父
// 自定义事件
const $emit=defineEmits(['send-data'])
const add=()=>{
$emit('send-data',{message:'我是子组件传过来的'})
}
</script>
//父组件
<template>
<p style="color: red;">{{ mesg }}</p>
<my-info :arr="lists" @send-data="rec"></my-info>
</template>
<script lang="ts" setup>
import {ref} from 'vue'
import MyInfo from '@/components/MyInfo.vue';
interface Opt{
message:string
}
// 在父组件创建响应式数据通过方法接收子组件传递的数据
let mesg=ref("")
//接收子组件传递的数据
const rec=(option:Opt)=>{
//使用ref 定义的响应数据，得采用xxx.value去赋值和取值
mesg.value=option.message
}
</script>二.动画过渡以及内置组件使用
1.注入机制
通过provide inject方法 注入机制 provide (生产者 提供数据) inject (消费者，使用数据)
//可以在承载所有文件的vue.js中
//引入provide
import { provide } from "vue";
//提供数据
provide("point", { x: 100, y: 200 });
//使用数据可以在不同的组件中使用
例如在views下的aboutView.vue文件
import { inject } from "vue";
// 消费者,注入，使用祖先或者父级的数据
let res=inject('point')
console.log(res);2.动画过渡
<transition name="layout">
<router-view/>
</transition>
<!-- vue3写法减少黄色警告 -->
<!-- exclude="AboutView" 排除该组件缓存 -->
<!-- include="AboutView" 包含该组件缓存 -->
<router-view v-slot="{ Component }">
<transition name="layout">
<keep-alive include="AboutView">
<component :is="Component"></component>
</keep-alive>
</transition>
</router-view>
// 入场
.layout-enter-from {
transform: translateX(-100%);
opacity: 0;
}
.layout-enter-active {
transition: all 0.5s;
}
.layout-enter-to {
transform: translateX(0);
opacity: 1;
}3.内置组件
保存组件状态，要用keep-alive 包裹component内置组件
<!-- exclude="AboutView" 缓存状态排除该组件缓存 -->
<!-- include="AboutView" 缓存状态包含该组件缓存 -->
<keep-alive include="AboutView">
<component :is="Component"></component>
</keep-alive>三.路由跳转和路由传值和导航守卫
1.路由传值
//在vue.js中
<router-link :to="{path:'/search',query:{keyword:'哈哈'}}">Search</router-link>
//在其他的组件中
<template>
<h3>{{kw}}</h3>
</template>
//userRoute获取路由信息
//与vue2写法不同，没有this
import { useRoute } from "vue-router";
//调用函数获取路由信息
let $route = useRoute();
console.log($route);
let kw: any = ref("");
kw.value = $route.query.keyword;2.路由跳转
<button @click="jumpToHome">跳转首页</button>
import { useRouter } from "vue-router";
// 用函数获取路由实例对象，导航式跳转
const $router=useRouter()
const jumpToHome=()=>{
$router.push({path:'/'})
}
3.路由守卫
{
path: '/draw',
name: 'draw',
meta:{
done:false
},
component: () => import('../views/DrawView.vue')
},
//导航守卫，禁止跳转到draw
router.beforeEach((to:any,from)=>{
console.log("");
// 只拦截了draw
if(to.meta.done==false){
return false; //取消导航，不允许访问
}
})四.使用element-plus组件库(vue@3使用)
进入项目文件安装------->npm install element-plus --save
在mian.ts文件中---->import 'element-plus/dist/index.css'
在mian.ts全局引入
import ElementPlus from 'element-plus'
import 'element-plus/dist/index.css'
// 创建vue程序使用路由挂载程序
const app=createApp(App)
app.use(router)
app.use(ElementPlus)
app.mount('#app')
<el-button type="primary" :icon="Edit" >点击查询</el-button>
<script>
import { ElButton } from 'element-plus'
import { Edit} from '@element-plus/icons-vue'
</script>五.基于vite构建项目步骤
通过vite创建vue3项目
---》npm create vue@latest
1.项目名称书写
2.选择ts
3.不选择JSX
4.引入vue-router
5.移入pinia
6.不选择Viteset
7.不需要端到端
8.选择Eslint
9.引入prettier
通过 pinia进行状态管理
在组件中引入 import { defineStore } from 'pinia'
///store 文件夹中的goods.ts
import { ref, computed } from 'vue'
import { defineStore } from 'pinia'
export const useGoodsStore = defineStore('goods', () => {
const num = ref(0)
const doubleCount = computed(() => num.value * 2)
function add() {
num.value++
}
function sub() {
num.value--
}
// 把方法和响应式数据导出去
return { num, doubleCount,add, sub }
})
//在pinia这个插件中，把vuex中的mutation去掉了
//在另外组件中
<script setup lang="ts">
//把goods.ts导入进来
import {useGoodsStore} from '../stores/goods'
const goodsStore=useGoodsStore()
console.log(goodsStore);
</script>
<template>
<main>
<h1> 主页</h1>
<p>数字{{ goodsStore.num }}</p>
<button @click="goodsStore.add">自增1</button>
<button @click="goodsStore.sub">自减1</button>
</main>
</template>
