目录
组件ref （vue2 $refs）和defineExpose
vue2与vue3 api的不同
v2使用的是Options API 选项形api 由各种选项构成
v3使用的是 Composition API 就是 setup() 函数
单文件组件< script setup >
< script setup > </script>
可以直接引入，定义，逻辑，无需return返出数据
直接import引入子组件后在页面直接使用，无需注册
但是，在setup中，是无法获取this实例的
手写父子组件v-model
父组件
<template>
// v-model:modelValue简写为v-model
// 可绑定多个v-model
<child v-model="state.name" v-model:age="state.age"></child>
</template>
<script setup>
import child from './child.vue'
import { reactive } from 'vue'
const state = reactive({
name: 'Jerry',
age: 20
})
</script>子组件
<template>
<span @click="changeInfo">我叫{{ modelValue }}，今年{{ age }}岁</span>
</template>
<script setup>
// import { defineEmits, defineProps } from 'vue'
// defineEmits和defineProps在<script setup>中自动可用，无需导入
// 需在.eslintrc.js文件中【globals】下配置【defineEmits: true】、【defineProps: true】
defineProps({
modelValue: String,
age: Number
})
const emit = defineEmits(['update:modelValue', 'update:age'])
const changeInfo = () => {
// 触发父组件值更新
emit('update:modelValue', 'Tom')
emit('update:age', 30)
}
</script>单组件的父子传值
子组件
<template>
<span>{{ props.name }}</span>
// 可省略【props.】
<span>{{ name }}</span>
<span>{{ friends }}</span>
<el-button size="small" @click="changeName">我想改名</el-button>
</template>
<script setup>
// import { defineEmits, defineProps } from 'vue'
// defineEmits和defineProps在<script setup>中自动可用，无需导入
// 需在.eslintrc.js文件中【globals】下配置【defineEmits: true】、【defineProps: true】
// 声明 props
const props = defineProps({
name: {
type: String,
default: ''
},
friends: {
type: Object,
default: () => {
return {};
}
}
})
// 声明 emit 事件，没有定义的事件名不会执行
const emit = defineEmits(['updateName'])
const changeName = () => {
// 执行 updateName 事件
emit('updateName', 'Tom')
}
</script>父组件
<template>
<child :name="state.name" :friends="state.friends" @updateName="handleUpdateName"></child>
</template>
<script setup>
// 引入子组件, setup 中会自动注册引入的组件
import child from './child.vue';
import { reactive } from 'vue';
const state = reactive({
name: 'Jerry',
friends: {
tom: true,
jerry: true,
}
})
// 接收子组件触发的方法
const handleUpdateName = (name) => {
state.name = name
}
</script>组件ref （vue2 $refs）和defineExpose
在标准组件写法里，子组件的数据都是默认隐式暴露给父组件的，但在 script-setup 模式下，所有数据只是默认 return 给template 使用，不会暴露到组件外，所以父组件是无法直接通过挂载 ref 变量获取子组件的数据。
如果要调用子组件的数据，需要先在子组件显示的暴露出来，才能够正确的拿到，这个操作，就是由 defineExpose 来完成。
父组件
<template>
<child ref="childRef"></child>
</template>
<script setup>
import { ref, onMounted } from 'vue'
// 引入子组件
import child from './child.vue'
// 子组件ref
const childRef = ref('childRef')
// onMounted 生命周期
onMounted(() => {
// 获取子组件name
console.log(childRef.value.name)
// 父组件中触发子组件暴露出来的方法
childRef.value.changeName()
})
</script>子组件
<template>
<span>{{state.name}}</span>
</template>
<script setup>
import { defineExpose, reactive, toRefs } from 'vue'
// 声明state
const state = reactive({
name: 'Jerry'
})
// 声明方法
const changeName = () => {
// 执行
state.name = 'Tom'
}
// 将方法、变量暴露给父组件使用，父组见才可通过ref API拿到子组件暴露的变量或方法
defineExpose({
// 解构state
...toRefs(state),
changeName
})
</script>单组件使用监听
引入
import { watch,watchEffect } from ‘vue’watch 用法
指定一个响应式数据，进行监听
watch( () => 监听的数据,
// 每次数据变化时，将新的数据传输到vuex里重新赋值
(newVal,oleVal) => { }
, { deep: true, //深度监听
immediate: true //立即监听 })监听多个数据
watch([fooRef, barRef], ([foo, bar], [prevFoo, prevBar]) => {
},{ deep: true, //深度监听
immediate: true //立即监听
})watchEffect 用法
自动监听函数内部使用过的响应式数据，其中一个变化，自动执行
watchEffect( ()=>{ 代码段 } )终止监听
// 通过变量接收watchEffect的返回值
const stop = watchEffect( ()=>{ 代码段 } )
// 执行这个返回值时，就是终止watchEffect的时候
stop()解决多次触发的副作用
const stop = watchEffect( (onInvalidate )=>{
// 调用onInvalidate 参数，在执行之前先清除
onInvalidate(){
// 取消发送axios请求
request.cancel()
}
})
单组件的两个参数
props 就是选项对象props
context 是一个普通的js对象 有 emit attrs expose slots
单组件使用vuex
*Vue3 中的Vuex不再提供辅助函数写法
<script setup>
import { useStore } from 'vuex'
// 必须先声明调用
const store = useStore()
// 获取Vuex的state
store.state.xxx
// 触发mutations的方法
store.commit('fnName')
// 触发actions的方法
store.dispatch('fnName')
// 获取Getters
store.getters.xxx
</script>路由守卫
<script setup>
import { onBeforeRouteLeave, onBeforeRouteUpdate } from 'vue-router'
// 添加一个导航守卫，在当前组件将要离开时触发。
onBeforeRouteLeave((to, from, next) => {
next()
})
// 添加一个导航守卫，在当前组件更新时触发。
// 在当前路由改变，但是该组件被复用时调用。
onBeforeRouteUpdate((to, from, next) => {
next()
})
</script>单组件使用this
引入
import { getCurrentInstance } from 'vue'拆分
let instance = getCurrentInstance()
let that = instance.appContext.config.globalProperties这里的that就是从vue中拆分出来的this实例
另一种方法
// proxy 就相当于 this
const { proxy } = getCurrentInstance() as any
计算属性的使用
引入
import { computed } from 'vue'使用
const com =computed( ()=> { 代码段 } )
// com就是计算属性完成后的值，可以直接做属性使用单组件使用nextTick
<script setup>
import { nextTick } from 'vue'
nextTick(() => {
// ...
})
</script>对 await 的支持
不必再配合 async 就可以直接使用 await 了，这种情况下，组件的 setup 会自动变成 async setup
<script setup>
const post = await fetch('/api').then(() => {})
</script>provide和inject
父组件
<template>
<child></child>
</template>
<script setup>
import { provide } from 'vue'
import { ref, watch } from 'vue'
// 引入子组件
import child from './child.vue'
let name = ref('Jerry')
// 声明provide
provide('provideState', {
name,
changeName: () => {
name.value = 'Tom'
}
})
// 监听name改变
watch(name, () => {
console.log(`name变成了${name}`)
setTimeout(() => {
console.log(name.value) // Tom
}, 1000)
})
</script>子组件
<script setup>
import { inject } from 'vue'
// 注入
const provideState = inject('provideState')
// 子组件触发name改变
provideState.changeName()
</script>vue3原型绑定属性与组件内使用
// main.js
import { createApp } from 'vue'
import App from './App.vue'
const app = createApp(App)
// 获取原型
const prototype = app.config.globalProperties
// 绑定参数
prototype.name = 'Jerry'// 单文件组件内使用
<script setup>
import { getCurrentInstance } from 'vue'
// 获取原型
const { proxy } = getCurrentInstance()
// 输出
console.log(proxy.name)
</script>在css里使用变量
只有在vue3中才支持这样使用
background-color: v-bind(color)vue3动画
Vue的过渡动画必须有dom或组件的显示 隐藏切换
路由动画
Vue2中 路由动画是transition标签包裹router-view
Vue3中 路由动画是router-view标签包裹transition
// Component是代表当前的组件
<router-view v-slot='{Component}'>
<transition name='toggle'>
<component :is="Component"></component>
</transition>
</router-view>路由动画代码展示
.skipBox {
width: 100%;
height: 100%;
position: absolute;
top: 0;
left: 0;
}
.skip-enter-from {
left: 100%;
}
.skip-enter-active,
.skip-leave-active {
transition: all 1s linear;
}
.skip-leave-to {
left: -100%;
opacity: 0;
transform: scale(0) rotate(180deg);
}注意：路由的切换需要定位，不然两个块级盒子会闪烁
DOM节点动画
DOM节点的动画是transition包裹对应的标签，是在显示隐藏切换时做过度
<transition name="fade">
<div>进行动画的元素</div>
</transition>DOM动画代码展示
.skip-enter-from,
.skip-leave-to {
left: -100%;
opacity: 0;
}
.skip-leave-active,
.skip-enter-active {
transition: all 0.5s linear;
}过度动画状态
在过渡的动画中，有六个状态 代码都是css，可以写css的所有过渡效果
下面中的v就是transition的name值
| v-enter-from | 进入过渡的开始状态 |
| v-enter-active | 进入过渡生效时的状态 |
| v-enter-to | 进入过渡的结束状态 |
| v-leave-from | 离开过渡的开始状态 也可以是进入过渡的结束状态 |
| v-leave-active | 离开过渡生效时的状态 |
| v-leave-to | 离开过渡的结束状态 |
响应式数据ref与reactive
ref 是vue3用来声明响应式数据，包含基本数据类型和数组 不能声明对象
reactive 是vue3用来声明包含对象的响应式数据
<script setup>
// 个人认为响应式变量和普通变量的最大区别是：响应式变量会同步更新视图模板中的显示
// 但是普通变量更改后不会触发视图更新
import { ref, toRef, toRefs, reactive, onMounted } from 'vue';
const num1 = ref(0); // 任意数据类型的响应式变量
const num2 = reactive({ num: 1 }); // reactive 多用于响应式对象定义
const { num } = toRefs(num2); // 将响应式对象转换为普通对象
const numCopy = toRef(num2, 'num'); // num2中num字段创建为一个新的响应式变量
onMounted(() => {
console.log(num.value); // 1
console.log(num1.value); // 0
console.log(num2.num); // 1
console.log(numCopy.value); // 1
setTimeout(() => {
num.value = 2;
// 虽然看起来是新的变量，但是最终还是指向原始对象的响应式变量，
console.log(numCopy); // 2
console.log(num2.num); // 2
}, 1000);
});
</script>引入方式
import { ref，reactive,toRefs } from 'vue'具体用法
let banner = ref([]/‘’/false); //定义非对象
let obj = reactive({ a:111,b:[],}); //定义对象
// 如何获取数据
banner.value = res;
obj.a = res注意：对数据进行结构赋值后，会使数据失去响应式功能，要想分出reactive的数据，使用toRefs
toRefs的用法
使用 toRefs 解构 解构后的数据，为 ref 数据
let {a,b} = toRefs(reactive数据)
在 return 中书写 可以省略在 html 中的代码 将 obj.name 省略为 name
...toRefs(obj)toRef 的用法
let data = toRef(obj,'data')注意事项
1 如果是单组件的setup，就不需要在return出数据，可以直接使用
2 如果没有使用toRefs返出的reactive数据，在html中使用格式为obj.XXX
3 在获取数据时，ref的数据格式为a.value,而reactive数据格式为obj.XXX
vue3中使用router
由于在setup中无法获取this的实例，所以，使用路由就不在是this.$router的形式
引入路由
import { useRoute / useRouter } from 'vue-router'定义路由
//引入路由跳转方法 router是用来跳转页面的
const router = useRouter ( )
//引入路由对象参数 route是用来接受跳转传过来的参数
const route = useRoute ( ) 路由传参的简写
router.push({ path: '/detail', query: { id: id } })
// 以上代码可简写为
router.push('/detail?id=' + id)"动态添加路由
添加一级动态路由
// 动态添加路由
const categoryRoute = {
path: "/category",
component: () => import("../pages/Category.vue")
}
// 添加顶级路由对象
router.addRoute(categoryRoute);添加二级动态路由
// 添加二级路由对象
router.addRoute('home', {
path: "moment",
component: () => import("../pages/HomeMoment.vue")
})
404页面
Mixin
Mixin是一种非常灵活的方式，来做vue的一个复用的功能，包含vue的所有的组件选项
使用方式
1 src同级位置，创建mixins文件夹，创建一个vue文件
2 这个vue的文件中，是用来定义公共的数据与方法的
3 在使用的组件中，引入并注册
mixin的合并规则
1 如果是data数据发生了冲突，则是以当前页面为主
2 如果是钩子函数的事件发生了冲突，则会合并数据，都可以实现
3 如果是methods components directive的数据事件冲突，则是以当前页面为主
全局定义
全局定义的mixin,则会对每一个组件都收到影响
6357
被折叠的 条评论
为什么被折叠?
到【灌水乐园】发言
