“VUE3快速入门（9）——插槽” 的相关文章
VUE3快速入门（3）——方法与事件
本文讲述了如何在自定义组件中定义并调用方法，以及绑定DOM事件响应的方法。 1. 自定义方法1.1 定义一个方法在<script>标签内的setup方法内增加一个add方法，该方法传入两个参数，用于求和： function add(a: number, b: number): number{ return a + b; } 同时，将add方法暴露（返回）： return {author, mail, tel, add};//author, mail, tel是上一节定义的变量 1.2 调用方法在<template>标签内，适当位置增加一个标签，用于调用方法： <h2>调用add方法： {{add(1,1)}}</h2> 1.3 查看结果编译、构建成功后，浏览器新出现“调用add方法： 2”的字样，说明求和方法被成功调用。 2. 绑定事件前端开发少不了处理DOM事件，如单击、获得焦点等。本节将讲述如何绑定常见的web标签事件。 2.1 绑定一个事件在<template>标签内，适当位置增加一个按钮，绑定click方法： <button @click="show(tel)">点我</button> 单击会调用test函数，并传入tel的值，该值在上一节已经定义： let author = "Jesse"; let mail = "3898xxxx@qq.com"; let tel = "136****615"; 2.2 完善事件处理方法在<script>标签内setup方法内，再增加show方法，该方法具有一个传输参数： function show(content: any): any { alert(content); } 同时记得暴露该方法： return {author, mail, tel, add, show};//author, mail, tel是上一节定义的变量 2.3 执行编译、构建成功后，浏览器会出现一个按钮，点击按钮，将弹出对话框，其内容是tel变量的内容。 3. 总结 方法与变量一样需要写在methods属性内。@click=”<方法名>”其实是v-on:click=”<方法名>”的简写。除了click外，还有submit、scroll的其他的DOM事件均可采用此方法进行事件处理。 4. 拓展学习与思考 除了v-on指令外，学习v-if、v-show、v-for的用法。尝试处理submit、onfocus等其他常见DOM事件。...
VUE3快速入门（7）——监视
本文讲述了监视基础数据类、对象数据类的方法。 1. 什么是监视监视是指，当被监视的对象发生变化时，执行某个逻辑，类似于控件的消息事件。从被监视的数据类型分类，可分为监视ref创建的普通类型、ref创建的对象类型、reactive创建的对象类型三类；从被监视数据的完整与否又可分为监视整个对象和监视部分属性。 2. ref类型的监视2.1 基础类型import { ref, watch } from 'vue'//引入watch let input_content = ref(0);//创建一个基础数据类型 //使用watch方法实现监视 watch(input_content, (newVal, oldVal)=>{ console.log("值：", newVal, oldVal) }); 关于watch方法的参数： 参数1： 需要时监视的变量；参数2： 回调函数，其中有两个传入参数，分别为新值和的值；也可以只有一个参数，即为新值；参数3： 配置对象，用于指定一些其他功能，如立即监视、深度监视等。 2.2 监视整个对象监视由ref定义的对象类型，其实是在监控对象类型的地址，因此部分字段的更新不会触发监视，需要手动开启深度监视。在这种情况下，任何一个字段的变化都会触发监视。 例子：监控员工年龄变化，当到达35岁时让其卷铺盖走人。HTML部分： <button @click="add()">+1</button> JS部分： import { ref, watch } from 'vue'//引入watch let worker = ref({ name: "张三", age: 32 }); function add(): any { worker.value.age += 1; } const stop = watch(worker, (newVal, oldVal)=>{ console.log("值：", newVal, oldVal) if(newVal.age > 35) { alert("卷铺盖走人"); stop();//停止监视 } }, {deep: true});//第三个参数开启深度监视 提示： 上述代码中，watch返回了一个函数，调用该函数时会停止当前的监视；watch的第三个参数开启了深度监视选项，这样仅变化对象成员时，也会触发监视调用；控制台打印的newVal, oldVal值均相同，因为对象的地址没有发生变化。 2.3 监视对象的属性(部分监视)很多时候，我们仅需要关注对象的某几个字段是否发生了变化，即部分监视。对象的部分属性又可能是基础类型，也可能是一个嵌套的对象。因此部分监视又分为基础数据类型和对象数据类型两种。 2.3.1 属性为基础数据类型需要将被监视的数据包装为getter函数 import { ref, watch } from 'vue'//引入watch let worker = ref({ name: "张三", age: 32 }); function add(): any { worker.value.age += 1; } const stop = watch(()=>{ return worker.value.age }, (newVal, oldVal)=>{ console.log("值：", newVal, oldVal) if(newVal > 35) { alert("卷铺盖走人"); stop();//停止监视 } }); 注意箭头函数也可以简写成： ()=> worker.value.age 2.3.2 属性为对象类型即嵌套对象，修改worker代码，增加银行存款账户的嵌套对象类属性： let worker = ref({ name: "张三", age: 32, accounts: { icbc: 2000, bc: 1200 } }); 增加存款和清零的功能： <button @click="icbc()">存入工行</button> <button @click="bc()">存入中行</button> <button @click="clear()">清零存款</button> function icbc() { //改变accounts的一个属性 worker.value.accounts.icbc += 1000; } function bc() { //改变accounts的一个属性 worker.value.accounts.bc += 1000; } function clear() { //改变整个accounts worker.value.accounts = {bc: 0, icbc: 0}; } 仅监视存款清零： watch(() => worker.value.accounts, (newVal, oldVal)=>{ console.log("账户变动：", newVal, oldVal) }); 监视存款清零和增加存款： watch(() => worker.value.accounts, (newVal, oldVal)=>{ console.log("存款清零：", newVal, oldVal) },{deep: true});//开启了深度监视 提示： 与整个对象的监视不同，部分监视即使该部分是对象，也必须写成getter函数形式，在这种情况下监视的是部分对象的地址；监视嵌套对象的内部属性，开启深度监视即可;最佳编码方式是，由ref创建的对象，只要是部分监视，则一律写成getter函数。 3. reactive类型的监视将worker修改为由reactive定义的响应式对象，特别注意整体修改accounts属性的写法： function clear() { Object.assign(worker.accounts, {bc: 0, icbc: 0}); } 监视accounts属性： watch(worker.accounts, (newVal, oldVal)=>{ console.log("账户变动：", newVal, oldVal) }); 当accou...
VUE3快速入门（8）——属性
本文讲述了组件属性的实现方法，以及如何限制属性的数据类型。 1. 什么是组件的属性组件的属性是指可以由组件的调用者动态设置的参数，组件在运行时根据这些参数展现调用者需要的数据。组件的属性等同于HTML标签的属性。 2. 最简单的一个属性本节实现一个展现员工信息的列表，第一步先传入一个“department”属性用于显示员工所属的部门。 2.1 属性的定义定义属性： import { defineProps } from "vue";//引入defineProps，该函数属于宏函数，实际无需引入 let props = defineProps(["department"]);//声明department为一个属性 defineProps方法传入一个字符串数组，其内容是将要被设为属性的变量名称。该方法同时返回一个对象，该对象由传入该组件所有属性的名称和值组成。 模板部分： <template> <p>所属部门： {{ department }}</p> </template> 2.2 使用组件并设置属性<WorkerTable department="宣传科"></WorkerTable> 3. 强制类型限定接下来新增一个属性：data，该属性是描述员工信息的数组，用于表格展示。其中模板部分如下： <template> <h1>所属部门:{{ department }}</h1> <table id="main"> <thead> <tr> <th scope="col">员工号码</th> <th scope="col">姓名</th> <th scope="col">性别</th> <th scope="col">电话</th> </tr> </thead> <tbody> <tr v-for=" (item, index) in data" :key="item.id"> <th scope="col">{{ item.id }}</th> <td scope="col">{{ item.name }}</td> <td scope="col">{{ item.sex ? '男' : '女' }}</td> <td scope="col">{{ item.tel }}</td> </tr> </tbody> </table> </template> 根据模板的展示需求，员工信息需要包括ID、姓名、性别、电话等字段，如果上级组件传入的属性数据不符合员工字段的要求，则组件会出现显示异常。为避免这样的问题，需要检查属性数据的类型，当类型不符合要求时，禁止上级组件的属性赋值。 3.1 定义新类型利用TS的接口类，定义一个员工数据类型，并导出：（建议新建一个名为WorkerTable的文件夹，该文件夹包含一个子文件夹src，用于存放组件的辅助代码，而组件的入口文件则与src同级） //file：@/component/WorkerTable/src/IWorker.ts export interface IWorker{ // 序列号 id: number, // 姓名 name: string, // 性别 sex: boolean, // 电话(可选) tel?: string } export type IWorkerArray = IWorker[]; 该文件定义了一个员工类：IWorker以及它的数组类型：IWorkerArray。 3.2 类型检查修改组件TS代码： import { type IWorkerArray } from "@/components/WorkerTable/src/IWorker"; defineProps<{department: string, data: IWorkerArray}>();//通过泛型进行类型检查并声明属性 上述代码有两个注意点： 引入类型需要使用type关键字通过泛型的方式进行类型检查时，所有属性均需进行类型检查（要么所有，要么都不） 3.3 属性赋值最后调用该组件的TS部分： import WorkerTable from '@/components/WorkerTable/WorkeTable.vue'; import { ref } from "vue"; let workers = ref([ {id: 1234, sex: true, name: "张三", tel: "13600000000"}, {id: 1235, sex: false, name: "李四", tel: "13600000001"}, {id: 1235, sex: false, name: "王五", tel: "13600000002"}, {id: 1234, sex: false, name: "赵六"} ]); 也可以向ref（reactive）传递泛型，在此处限定workers的类型： import { type IWorkerArray } from '@/components/WorkerTable/src/IWorker'; import { ref } from "vue"; let workers = ref<IWorkerArray>(...); 但由于WorkerTable组件已经进行了类型检查，因此上述代码的写法似乎没必要。 模板部分： <WorkerTable department="办公室" :data="workers"></WorkerTable> 注意： 当传入的属性不符合类型要求时，代码将无法运行，避免显示异常。属性的“：”表示后面的内容作为表达式解析，如果不加“：”，则将会把“worker...
VUE3快速入门（11）——路由的嵌套与传参
1. 嵌套路由1.1 什么是嵌套路由嵌套路由是指一个路由视图中又包含一个路由视图，通常用于多级分类的SPA。比如一个新闻SPA，分为板块与列表二级。单击不同的板块出现不同的文章列表，再点击列表则出现新闻正文。本文基于上一节内容增加新闻列表和新闻详情的展示功能。 1.2 创建显示新闻详情的视图组件在“@/views/”路径下，新增一个Content.vue组件，HTML部分如下： <template> <div id="detail"> <h2>新闻标题</h2> <p>这是新闻的具体内容</p> </div> </template> 1.2 定义新闻数据修改上一节的News.vue代码的ts部分，增加新闻数据： <script lang="ts" name="News" setup> import { ref } from 'vue'; const news_data = ref([ { id: 1, title: '新闻1', content: '新闻内容1' }, { id: 2, title: '新闻2', content: '新闻内容2' }, { id: 3, title: '新闻3', content: '新闻内容3' }, { id: 4, title: '新闻4', content: '新闻内容4' } ]); </script> 1.3 新增子路由定义在路由定义文件的新闻路径下增加一个子路由： import Content from '@/views/Content.vue'//新增引入 const router = createRouter({ history: createWebHashHistory(), routes: [ //... { name: 'news', path: '/news', component: News, //增加children属性，注意为数组 children: [ { name: 'content', path: 'content',//注意：子路由无需再用“/” component: Content, }], }, //... ], }) 1.4 修改新闻列表视图修改News.vue的HTML部分如下： <template> <h1>新闻列表</h1> <div id="warpper"> <!-- 左侧新闻列表 ---> <div id="list"> <ul> <li v-for="item in news_data" :key="item.id"> <p><RouterLink :to='{path: "/news/content"}'>{{ item.title }}</RouterLink></p> </li> </ul> </div> <!-- 右侧新闻内容 --> <div id="content"> <RouterView></RouterView> </div> </div> </template> 注意二级路由的写法。 修改完成后，可以在新闻导航内看到左侧的新闻列表，点击链接在右侧展示的新闻内容。 2. 路由传参上述代码中点击每个新闻链接展示的内容都一样，现在需要根据链接展示不同的新闻，该功能需要用路由传参来实现。 2.1 Query传参路由定义文件见前文。 2.1.1 直接字符串拼接（不推荐）修改New.vue的RouterLink组件调用代码： <p> <RouterLink :to='`/news/content?title=${ item.title }&content=${ item.content }`'>{{ item.title }}</RouterLink> </p> 注意VUE的字符串模板语法：`…${变量名1}…${变量名2}…`。修改Content.vue的代码，取参数：ts部分： import { useRoute } from 'vue-router'//引入useRoute import { toRefs } from 'vue'//响应式 const route = useRoute() const { query } = toRefs(route)//从useRoute中解构query属性，该属性保存了传递的参数。 html部分： <template> <div id="detail"> <!-- 从query属性获取title参数--> <h2>{{ query.title }}</h2> <!-- 从query属性获取content参数--> <p>{{ query.content }}</p> </div> </template> 注意：由于是直接把传递的参数进行动态显示，所以在解构时需要转换为响应式类型。或者不解构，则写法为： <...
发表评论
