乌海网站建设,开网店详细步骤,人工智能培训师,手机端网站建站Vue3快速入门一、传值父传子#xff0c;子传父v-model二、插槽2.1、匿名插槽2.2、具名插槽2.3、插槽作用域2.4、插槽作用域案例2.4.1、初始布局2.4.2、插槽使用2.4.3、点击编辑按钮获取本行数据#xff08;插槽作用域的使用#xff09;2.4.4、类型书写优化2.4.5、全局接口抽…
Vue3快速入门一、传值父传子子传父v-model二、插槽2.1、匿名插槽2.2、具名插槽2.3、插槽作用域2.4、插槽作用域案例2.4.1、初始布局2.4.2、插槽使用2.4.3、点击编辑按钮获取本行数据插槽作用域的使用2.4.4、类型书写优化2.4.5、全局接口抽取和ts全局配置三、teleport传送门四、类型增强五、第三方类型声明六、配置项目路径别名一、传值
父传子子传父
父组件
templatediv父组件/divChild :numnum fnchangNum/Child
/templatescript setup langts
import Child from ./12son.vue
import { ref } from vue;
let num ref(20)
const changNum () {num.value
}
/scriptstyle scoped/style子组件
templatediv子组件{{ num }}/divbutton clickhdClick按钮/button
/templatescript setup langts
import { defineProps, defineEmits } from vue;
defineProps({num: {type: Number, // 类型default: 10 // 默认值}
})
const emit defineEmits{(event: fn): void
}()
const hdClick () {emit(fn)
}
/scriptstyle scoped/stylev-model
父组件
templatediv父组件/divSon v-model:numnum/Son
/templatescript setup langts
import Son from ./14son.vue
import { ref } from vue;let num ref(10)/scriptstyle scoped/style子组件
templatediv子组件-{{ num }}/divbutton clickhdClick改变/button
/templatescript setup langts
import { } from vue;
let props defineProps({num: {type: Number,default: 100}
})let sonNum props.num
const emit defineEmits{// update固定写法 后面的变量是父组件中v-model后面的变量(event: update:num, n: number): void
}()
const hdClick () {// 上面event的值,要改变的值emit(update:num, sonNum)
}/scriptstyle scoped/style二、插槽
2.1、匿名插槽
父组件
templatediv/divChilda href#a标签/ap层楼终究误少年 自由早晚乱余生/p/Child
/templatescript setup langts
import Child from ./16son.vue
import { } from vue;/scriptstyle scoped/style子组件
templatediv/divslot/slot
/templatescript setup langts
import { } from vue;/scriptstyle scoped/style2.2、具名插槽
父组件
templatediv/divChild!-- template v-slot:link --!-- 简写#link --template #linka href#a标签/a/templatetemplate v-slot:paragraphp可春色不过宛若江南/p/template/Child
/templatescript setup langts
import Child from ./16son.vue
import { } from vue;/scriptstyle scoped/style子组件
templatediv/divslot nameparagraph/slotslot namelink/slot
/templatescript setup langts
import { } from vue;/scriptstyle scoped/style2.3、插槽作用域
父组件
templatediv/divChild!-- template v-slot:link --!-- 简写#link --template #linka href#a标签/a/templatetemplate #paragraphscopep可春色不过宛若江南/pp{{ scope.title }}/p/template/Child
/templatescript setup langts
import Child from ./16son.vue
import { } from vue;/scriptstyle scoped/style子组件
templatediv/divslot nameparagraph title空港曲/slotslot namelink/slot
/templatescript setup langts
import { } from vue;/scriptstyle scoped/style2.4、插槽作用域案例 2.4.1、初始布局
父组件
templateMyTable :arrstate.arr/MyTable
/templatescript langts setup
import MyTable from ./18son.vue
import { reactive } from Vue
let state reactive({arr: [{name: 许巍,age: 18}, {name: 朴树,age: 20}]
})
/script子组件
templatetabletrth姓名/thth年龄/thth操作/th/trtr v-foritem, index in arr :keyindextd{{ item.name }}/tdtd{{ item.age }}/tdtdbutton编辑/buttonbutton删除/button/td/tr/table
/templatescript langts setuplet props defineProps({arr: {type: Array,default: []}
})
/scriptstyle scoped
table {border-collapse: collapse;
}table,
th,
td {border: 1px solid #000;
}th,
td {padding: 10px
}
/style2.4.2、插槽使用
需求第一个表格只有编辑按钮第二个表格有编辑和删除按钮 父组件
templateMyTable :arrstate.arrtemplate #btnsbutton编辑/button/templatebutton删除/button/MyTableMyTable :arrstate.arrtemplate #btnsbutton编辑/buttonbutton删除/button/template/MyTable
/template子组件: tdslot namebtns/slot/td2.4.3、点击编辑按钮获取本行数据插槽作用域的使用
父组件
templateMyTable :arrstate.arrtemplate #btnsscopedbutton clickhdClick(scoped.index)编辑/button/template!-- 相当于let {index} scope --!-- template #btns{index}button clickhdClick(index)编辑/button/template --button删除/button/MyTableMyTable :arrstate.arrtemplate #btnsbutton编辑/buttonbutton删除/button/template/MyTable
/templatescript langts setup
import MyTable from ./18son.vue
import { reactive } from Vue
let state reactive({arr: [{name: 许巍,age: 18}, {name: 朴树,age: 20}]
})
const hdClick (index: number) {console.log(state.arr[index])
}
/script子组件
templatetabletrth姓名/thth年龄/thth操作/th/trtr v-foritem, index in arr :keyindextd{{ item.name }}/tdtd{{ item.age }}/tdtdslot namebtns :indexindex/slot/td/tr/table
/templatescript langts setuplet props defineProps({arr: {type: Array,default: []}
})
/scriptstyle scoped
table {border-collapse: collapse;
}table,
th,
td {border: 1px solid #000;
}th,
td {padding: 10px
}
/style2.4.4、类型书写优化 子组件中上面的代码模板里面报错。所以可以做如下优化
子组件中
templatetabletrth姓名/thth年龄/thth操作/th/trtr v-foritem, index in arr2 :keyindextd{{ item.name }}/tdtd{{ item.age }}/tdtdslot namebtns :indexindex/slot/td/tr/table
/templatescript langts setuplet props defineProps({arr: {type: Array,default: []}
})interface UserType {name: string,age: number
}
let arr2 props.arr as UserType[]
/scriptstyle scoped
table {border-collapse: collapse;
}table,
th,
td {border: 1px solid #000;
}th,
td {padding: 10px
}
/style2.4.5、全局接口抽取和ts全局配置
项目目录下新建types文件夹其中新建table.d.ts文件
interface UserType{name:string;age:number;
}在tsconfig.json中补充 include: [...,types/**/*.d.ts],在你的项目中如果table.d.ts文件中已经export例如
export interface UserType{name:string;age:number;
}则需要在组件中引入之后才可以使用这个接口
import {UserType} from ../../types/table三、teleport传送门
Vue3提供的新组件它可以把组件传送到指定位置传送到指定标签内部的最后
templateTeleport to#appp在歌舞升平的城市忍不住回头看我的城池在我手的将要丢失他的幼稚我的固执都成为历史/p/TeleportMyTable :arrstate.arrtemplate #btnsscopedbutton clickhdClick(scoped.index)编辑/button/templatebutton删除/button/MyTableMyTable :arrstate.arrtemplate #btnsbutton编辑/buttonbutton删除/button/template/MyTable
/templatescript langts setup
import MyTable from ./18son.vue
import { reactive } from Vue
let state reactive({arr: [{name: 许巍,age: 18}, {name: 朴树,age: 20}]
})
const hdClick (index: number) {console.log(state.arr[index])
}
/script四、类型增强
index.html
scriptvar globalVar globalVar变量;var globalObj { name: , age: 20 };function fn(str) {console.log(fn函数 str);}
/script组件中
console.log(globalVar, globalObj);
fn()如果上面几个变量和函数没有在全局做声明会报红线所以我们在types文件夹中创建common.d.ts文件
declare var globalVar: string;
type ObjType { name: string; age: number }
declare var globalObj: ObjType;
// 声明函数fn类型
declare function fn(s?: string): void;五、第三方类型声明
在index.html中做jquery全局引入
script srchttp://libs.baidu.com/jquery/2.0.0/jquery.min.js/script在组件中使用
console.log($(#app));
$.ajax()此时没有在全局声明的话上面的写法也会报红线在types文件夹中创建jquery.d.ts文件
declare function $(n: string):any;
/* declare let $: object; 重复报红*/
declare namespace $ {function ajax():void;
}拓展关于namespace
// 全局变量的声明文件主要有以下几种语法
declare var 声明全局变量
declare function 声明全局方法
declare class 声明全局类
declare enum 声明全局枚举类型
declare namespace 声明含有某方法的全局对象
interface 和 type 声明全局类型六、配置项目路径别名
目前ts对指向src目录的提示是不支持的vite默认也是不支持的。
所以需要手动配置符号的指向
tsconfig.json中添加两项配置
compilerOptions: {...baseUrl: ./,paths: {/*: [src/*],#/*: [types/*]}
},添加完后就有提示了import MyTable from /components/03-AppChild.vue但这仅仅是ts的提示支持去运行案例还会报错。这是因为vite默认不认识符号的意思。
这时候就需要在vite.config.ts中添加配置(参考网址https://vitejs.cn/config/#resolve-alias)
import path from path;export default defineConfig({plugins: [vue()],resolve: {alias: {: path.join(__dirname, src),#: path.join(__dirname, types)}}
})这时候引入的会path模块报红但其实我们已经有node所以就已经有path模块只是缺少ts的一些声明配置。
所以需要安装关于node这个库的ts声明配置
npm i -D types/node安装成功就没有报红了,如果import后面的path报红就把引入换成 import * as path from path;
如有不足请多指教 未完待续持续更新 大家一起进步
