前端小白学习vue3框架（二）

一.组件以及组件传值

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>