自定义组件某个模块
- vue中可以采用slot即插槽的方式去植入我们自定义的模块
- 默认插槽
父级：
<MyInput>
<div>hello 大刷币</div>
</MyInput>
子级：
<div>
<slot></slot>
</div>- 具名插槽
父级：
<MyInput>
<template #handsome>
<div>hello 大刷币</div>
</template>
</MyInput>
子级：
<div>
<slot name='handsome'></slot>
</div>- 作用域插槽
父级：
<MyInput>
<template v-slot="{greet}">
<div>{{greet}}</div>
</template>
</MyInput>
子级：
<div>
<slot greet="hello 大帅比"></slot>
</div>挂载到某个节点
<Teleport to="xx"></Teleport>巧用$attrs
在props和emits显示声明的属性除外，多节点一定要指定不然会有警告~
<template>
<div>hello</div>
<div v-bind="$attrs">大帅比</div>
</template>defineModel (Vue 3.4)
实现属性双向数据绑定
父组件：
const greet= ref('Hello 大帅比')
<MyInput v-model="greet"></MyInput>
子组件：
<template>
<div>{{ name }}</div>
</template>
<script setup>
const name = defineModel()
</script>defineProps/defineEmits
- defineProps:接受组件的props
- defineEmits:接受自定义事件
- defineProps示例，defineEmits类似换个名字即可
<script setup>
//第一种
defineProps(['name', 'age'])
//第二种
defineProps({
name: {
type: String,
default: "大帅比"
}
})
//第三种
interface Type {
name: string
}
defineProps<Type>()
</script>defineExpose
导出组件内的变量和函数，在外层使用ref调用即可
父组件：
const myRef = ref()
<MyInput ref="myRef"></MyInput>
子组件：
<script setup>
defineExpose({
handleBat,
name,
age
})
</script>toRefs使用场景
- 使用pinia管理全局状态，内部组件使用store可以解构出来，并套上toRefs可以保持响应式
watchEffect和watch的用法
watchEffect
- 立即执行
- 多个依赖的话没办法确认是那个依赖导致的更新
- 没法获取到依赖的前后更新的值
//基本用法
watchEffect(()=>{
xxxxx
})
//延迟到组件渲染之后执行
watchEffect(()=>{},{flush:'post'})
//依赖改变立即触发
watchEffect(()=>{},{flush:'sync'})
//清除监听
const stop = watchEffect(()=>{
xxxx
})
stop()watch
- 懒加载
- 明确那个依赖导致的更新
- 可以获取到依赖的更新前后的值
//单个依赖
watch(yy,(new,old)=>{
xxx
})
//多个依赖
watch([x,y],([newX,newY],[oldX,oldY])=>{})
//深度监听
watch(()=>x,(newX,oldX)=>{},{deep:true})
或
watch(x,(newX,oldX)=>{})
//清除监听
const stop= watch(x,()=>{})
stop()探索生命周期函数
- 父子生命周期执行顺序
- 挂载
- 更新
- 卸载
实现一个简易的Toast
import { createVNode, render } from "vue";
import Message from './message.vue'
const ToastFn = () => {
const container = document.createElement("div");
return {
open: function ({...res}) {
createVNode(Message,{...res})
render(vNode,container)
},
destroy: function () {
render(null, container);
}
};
};
const Toast = ToastFn()
export default Toast
Message.vue:
<template>
<div>{{ name }}</div>
</template>
<script setup>
defineProps({
name: {
type: String,
default: "大帅比"
}
})
</script>
