李文豪の博客

插槽slot插槽就是子组件中的提供给父组件使用的一个占位符，用 表示，父组件可以在这个占位符中填充任何模板代码，如 HTML、组件等，填充的内容会替换子组件的标签。 匿名插槽1.在子组件放置一个插槽 12345<template> <div> <slot></slot> </div></template> 父组件使用插槽 在父组件给这个插槽填充内容 12345<Dialog> <template v-slot> <div>2132</div> </template></Dialog> 具名插槽具名插槽其实就是给插槽取个名字。一个子组件可以放多个插槽，而且可以放在不同的地方，而父组件填充内容时，可以根据这个名字把内容填充到对应插槽中 123456<div> <slot name="header"></slot> <slot> ...

动态组件1<component :is="comp"></component> 1234567import tree from "../../components/tree/index.vue";import folder from "../../components/folder/index.vue"let comp = treeconst switchComp = () => { //切换} 在setup语法糖下，is绑定的必须是组件实例，而不能是组件名。 采用vue2的写法才会使组件名直接关联到组件，可以用组件名。 一个实例代码稍微复杂点，主要是结合了父子组件的传参，直接把全部代码贴在这里了~ menu 1234567891011121314151617181920212223242526272829303132333435363738394041424344454647484950515253545556575859606162636465666768697 ...

递归组件tree子组件 123456789101112131415161718192021222324252627282930313233343536373839<template> <div> <div @click.stop="clickTreeItem(item)" :key="index" v-for="(item,index) in data" class="tree"> {{item.name}} <TreeItem @on-click="clickTreeItem" v-if="item?.children?.length" :data="item.children"></TreeItem> </div> </div></template><script se ...

父子组件传参父组件给子组件传参父组件 12345678910111213141516171819<template> <div class="layout"> <Menu title="ler-jiu" :data="data"></Menu> <div class="layout-right"> <Header></Header> <Content></Content> </div> </div></template><script setup lang="ts">import Menu from './Menu/index.vue'import Header from './Header/index.vue'import Content from & ...

less12345678910111213141516171819202122232425262728<template> <div class="layout"> <Menu></Menu> <div class="layout-right"> <Header></Header> <Content></Content> </div> </div></template><script setup lang="ts">import Menu from './Menu/index.vue'import Header from './Header/index.vue'import Content from './Content/index.vue'</script>& ...

vue3生命周期先贴个链接在这~ https://xiaoman.blog.csdn.net/article/details/122811060

watch监听数据源的变化，并执行回调函数 参数1，数据源 参数2，回调函数(newVal, oldVal) 参数3，配置对象 deep: 是否开启深度监听 immediate: 是否立即执行一次 普通类型包装的Ref对象监听多个可以用数组的形式表示 1234567let msg1 = ref('')let msg2 = ref('')watch([msg1, msg2], (newVal, oldVal) => { console.log('old:', oldVal); console.log('new:', newVal);}) 对象类型包装的Ref对象需要开启深度监听，才能监听到对象属性的变化。不过开启深度监听后，oldVal会与newVal相同，也就是说不能知道旧的值。可能是vue底层实现的问题。 123456789101112let deepMsg:Ref = ref({ name: 'ler-jiu', age: 18& ...

computed当依赖的变量改变时，会重新计算结果。这种类型也是响应式的。 123456789<div> part1: <input type="text" v-model="part1"> <br> part2: <input type="text" v-model="part2"> <br> part1+part2: {{part12}}</div> 123456let part1 = ref()let part2 = ref()let part12 = computed(() => { return part1.value + part2.value;})

toRef toRefs toRawtoRef将响应式对象，与其一个属性的名称传入toRef(obj, 'attr')，得到的是该属性经Ref包装后的变量。可以通过对该变量进行修改，从而修改原对象的属性。可以用于函数传参。 原始对象若为非响应式的，toRef不会发挥作用。 123456789let form = reactive({ name:'ler-jiu', age: 18})let formName = toRef(form, 'age')const changeFormAge = () => { formName.value = 21} toRefs将一个对象所有的属性进行toRef，得到一个对应的对象。 可以用于解构。 1let {name, age} = toRefs(form) 这样得到的name与age均为响应式的。 toRaw将响应式对象恢复为普通对象

reactive前置内容：https://lerjiu.github.io/2022/09/27/learn-vue%20ref/ reactive与ref区别 ref支持所有类型，而reactive只支持引用类型 ref需要.value，而reactive不需要 注意 reactive变量不能直接赋值，因为其由proxy代理，直接赋值会破坏响应式对象 readonly对reactive变量进行封装，使其属性均为只读，不过不能阻止对原变量的修改，并且会跟随原变量一起改变 123456let form = reactive({ name:'ler-jiu', age: 18})let read = readonly(form) shallowReactive与shallowRef类似 响应到对象的第一级属性 当响应的值更新时，仍会将不响应的值一并更新