如果你看了上一关于3.2项目的搭建,看看玩这篇这些常用的知识点,那基本可以进入项目实战
上一篇vue3.2系统搭建
【vue3|vue3 setup语法糖中组件之间通讯以及vuex的使用以及数据监听,路由跳转传参等基础知识点】vue 从2到三的变化,其实只有很小的差别,可能就是你写习惯2,现在来写3,有那么一点不习惯而已。
在我们日常开发过程中,常用的知识点
1路由的跳转传参
2组件通讯
3.vuex状态管理
4.数据监听
等等,其他的就是一些数据处理,数据的组装
1.路由的跳转传参 使用
路由跳转传参
//l路由引入
import { useRoute, useRouter } from "vue-router";
const router = useRouter();
//其他页面接受方式当然你也可以是params的方式
2组件通讯
//父组件 我是父组件,子组建修改父组件的值为{{parentValue}}
nter;
}
>
//子组件给父组件传值
我是子组件,这里是父组件传递过来的值----{{msg}}
给父组件传值按钮2
其实记住 defineProps接收, defineEmits用来发送
3.vuex状态管理
这个莫非也就是 取数据,修改数据的问题,
import { createStore } from 'vuex'
const store = createStore({
state: {
userInfo: {
name:'weblzr'
}
},
mutations: {sername(state, name){
state.userInfo.name = name
}
},
actions: {},
getters: {}
})
export default store
比如我们需要使用
name
,在对应vue文件中 直接取值 {{$store.state.userInfo.name}}
修改
修改vuex名字
或者使用
dispatch
操作 actions
来改变数据,不依依说,这边文章写的很详细,模块拆分,辅助函数等等
vuex进阶传送门
修改数据监听取值
监听值取值 {{name}}
也可以使用
computed
结合watch
来监听数据变化computed watch 来监听数据变化
至于其他知识点不依依细说,大同小异而已,掌握基本的基本够用。
推荐阅读
- CSS|采用官方最简单的办法搭建vite+vue+ts开发项目框架
- vue|vue导出单页pdf
- VUEX的基础
- 项目分析一
- 项目分析五
- 项目分析六
- 项目分析七
- vue.js|vue-cli3.0 使用postcss-plugin-px2rem(推荐)和 postcss-pxtorem(postcss-px2rem)自动转换px为rem 的配置方法;
- 大数据项目总结|基于Java+springmvc+vue 健康管理系统