vue3语法糖的使用和定义、语法糖中路由的使用、语法糖中状态管理的使用、语法糖中组件的传值

您所在的位置：网站首页 › vue封装分页组件 › vue3语法糖的使用和定义、语法糖中路由的使用、语法糖中状态管理的使用、语法糖中组件的传值

vue3语法糖的使用和定义、语法糖中路由的使用、语法糖中状态管理的使用、语法糖中组件的传值

2023-05-29 20:23| 来源: 网络整理| 查看: 265

1.vue2和vue3区别 1.1 vue3中vue是一个对象，可以使用按需导入

import {createApp} from 'vue ’

1.2 导入区别 vue2中使用的vue-router3.0导入的是构造函数 new VueRouter()vue3中使用的vue-router4.0导入的是对象 createRouter() 1.3 语法

vue2语法在vue3中都可以使用，除了过滤器并不能使用

2. vue3脚手架

脚手架中的路由有三种模式：历史模式history、哈希模式hash、抽象模式abstract

2.1 脚手架配置

vue create projectname------Manually select features--------Babel(js编译器)、Router、Vuex、CSS Pre-processors(css预处理器)

3.语法糖 3.1 组件的样式绑定

补：scss语法和less语法动态绑定数据

在vue中的setup函数中定义一个常量，vue3单文件组件中，支持style样式绑定变量，使用v-bind()引入动态值。组件中的数据只能绑定到组件内的标签上，组件外的标签绑定无效

setup(props) { const myColor = ref("red") const size = ref(20) const mySize = computed(() => { return size.value + "px" }) return { myColor, size, mySize } } body { background-color: v-bind(myColor); } 3.2 语法糖

vue3单文件组件提供了一种更简洁的语法结构，称之为“语法糖”

3.2.1 使用语法糖

1.在script标签上添加setup属性即变为糖衣语法，相当于整个script就是组件的setup函数

2.在语法糖中，省略了导出export default() 省略了setup函数，省略了return()

3.定义的数据无需return即可在模板和样式中调用

4.语法糖中，子组件导入即可使用，无需在components中注册

import { ref } from "vue"; const count = ref(0) 3.3语法糖组件传值 3.3.1 父传子

在父组件中子组件标签使用未定义的数据变量向子组件传值，在子组件的语法糖中使用defineProps()声明自定义属性用于接收父组件传值

defineProps定义props的函数，函数参数可以是一个数组直接接收数据，参数是一个对象用于属性验证。

获取父组件向子组件传值通过定义的defineProps函数返回值调用传递的值

const props=defineProps(["msg","info"]) console.log(props.msg);//获取传值 3.3.2 子传父

在语法糖中使用defineEmits()注册自定义事件用于向父组件传值，返回是emit函数.在父组件中使用绑定自定义事件来拿到子组件向父组件的传值

defineEmits()函数参数是一个数组，用于定义自定义事件，可以是小驼峰也可以是全部小写，但是在绑定自定义事件书写应为全部小写。

子组件中：

import { ref, watch } from "vue" const name = ref("") const emit = definedEmits(["myName"]) watch(name, newValue => { emit("myName", newValue) })

父组件：

3.4 语法糖中的路由

在语法糖中需要用到路由信息对象route和路由配置对象router必须按需引入对象，才可以使用

3.4.1 在语法糖中引入路由

在语法糖中引入路由配置对象和路由信息对象：

import {useRoute, useRouter} from "vue-router" 3.4.2 在语法糖中使用路由

利用const定义一个常量定义路由

const route = useRoute() const router = useRouter() 3.4.3 在语法糖中实现路由跳转

html:

去主页

javascript:

function goToHome() { router.push("/") } 3.5 语法糖的状态管理

在语法糖中使用状态管理首先也需要引入状态管理对象

3.5.1 引入状态管理 import { useStore } from "vuex" 3.5.2 定义状态管理仓库

在含有router的vue项目中store文件夹下的index.js文件中定义你所需要的状态管理的变量。仓库中state对象中定义变量isLogin。想要改变变量的值需要在mutations中定义修改变量的函数setisLogin，含有两个参数，第一个参数state为仓库中state定义的变量对象，第二个参数value是定义的新值。

import { createStore } from 'vuex' export default createStore({ state: { isLogin: false }, getters: {}, mutations: { setisLogin(state, value) { state.isLogin = value } }, actions: {}, modules: {} }) 3.5.2.1 在语法糖中调用状态管理仓库中的变量

在组件使用之前，需要在js中导入store仓库才能使用状态管理。在组件中使用store.sate.isLogin打点调用仓库state对象中变量的值

引入状态管理仓库：

import { useStore } from "vuex"

显示状态管理仓库的变量

{{store.state.isLogin}} 3.5.2.2 改变状态管理仓库中的变量值

改变状态管理仓库中的变量值，需要现在状态管理仓库中的mutations对象中定义改变变量值的函数

export default createStore({ state: { isLogin: false }, getters: {}, mutations: { setisLogin(state, value) { state.isLogin = value } }, actions: {}, modules: {} })

在组件中使用状态管理对象的commit函数修改变量值，参数一为状态管理中的修改变量值的函数名，第二个参数是修改后的新的变量值

html：

去主页

javascript:

function goToHome() { router.push("/") store.commit("setisLogin", true) }

【本文地址】

vue3语法糖的使用和定义、语法糖中路由的使用、语法糖中状态管理的使用、语法糖中组件的传值

vue3语法糖的使用和定义、语法糖中路由的使用、语法糖中状态管理的使用、语法糖中组件的传值

今日新闻

推荐新闻