哪个网站可以做加工,wordpress主题制作,网站为什么要做seo,佛山新网站建设如何全栈开发一条龙——前端篇 第一篇#xff1a;框架确定、ide设置与项目创建 第二篇#xff1a;介绍项目文件意义、组件结构与导入以及setup的引入。 第三篇#xff1a;setup语法#xff0c;设置响应式数据。 第四篇#xff1a;数据绑定、计算属性和watch监视
辅助文档框架确定、ide设置与项目创建 第二篇介绍项目文件意义、组件结构与导入以及setup的引入。 第三篇setup语法设置响应式数据。 第四篇数据绑定、计算属性和watch监视
辅助文档HTML标签大全实时更新
本文将进一步介绍组件间传参并补充一些接口等的基础知识。 文章目录 一、Props组件通信1.基本语法2.限制类型传参1.类型限制2.需求限制3.设置接受属性默认值 补充1ts接口数组接口reactive接口 补充2标签的ref属性补充3监视对象中的单个属性1.属性为基本类型2.属性为对象3.监视多个属性4.watchEffect 一、Props组件通信
1.基本语法 通过props可以实现组件间通信以上代码就能打印出 哈哈。 同时defineProps函数有返回值返回值是一个对象包含了你传递来的所有参数。我们可以用 let x defineProps([a,b]) 来接收并保存就可以用x.a来调用。 传数组需要加:加了:代表 表达式读取。 2.限制类型传参
1.类型限制
你先写一个接口如果不会你先理解这里下面会说接口怎么写比如这个接口叫persons这样你就可以这样接受参数
defineProps{list:persons}()这样只能接受响应的类型不然有warning
2.需求限制
有一种情况某个参数有对象有有的没有我们的接受要能处理这种情况。
defineProps{list?:persons}()加个问号即可。
3.设置接受属性默认值
对于2中的可有可无数据在没有的时候我们的页面什么都不显示就很尴尬所以我们可以给他附一个默认值。这需要引入 withDefaults
import {withDefaults} from vuewithDefaults( defineProps{list?:persons}() , {
list : () [{id:2,name:TTTi9er,age:18}]
} )注意默认值的传入需要用函数。
补充1ts接口 在src中新建文件夹types,包含index.ts文件
export interface PersonInter{id:string,name:string,age:number
}在ts文件中加入接口这样你在外面就可以这样调用接口了。 import {type PersonInter} from /typeslet person:PersonInter {id:234,name : zac, age:60}
这样可以保证代码的规范。 如果你在这里遇到了报错Cannot find module /types or its ... 可以把tscondig.json换为
{compilerOptions: {// ...baseUrl: ./, // 这里需要配置paths: {/*: [./src/*] // 这里需要配置}// 如果baseUrl设置为src,那paths就应该配置为{/*: ./*},如下// baseUrl: src,// paths: {// /*: [./*]// }// 相关baseUrlpaths说明请查看官方文档},// include也需要配置以下include: [src/**/*.ts, src/**/*.d.ts, src/**/*.tsx, src/**/*.vue],exclude: [node_modules]
}
然后重新打开项目即可。
数组接口
如果你要把接口应用于数组请按照以下范式 你也可以直接定义数组的接口 reactive接口 注如果元素是可有可无的在定义接口的时候可以加一个问号
补充2标签的ref属性
我们可以在框架中加入ref属性确保我们可以在其他地方选中它。ref是每一个Vue文件独立的这样即使id与其他vue重复也没关系使用方法如下
templatediv class style_test h2 reftitleTTTi9er/h2button clickchoose点我选中title/buttonh2{{ j }}/h2/div
/templatescriptexport default {name : Test//组件名}
/scriptscript setupimport {ref} from vuelet title ref()let j ref(未选中)function choose(){j.value title.value.innerText}/scriptstyle.style_test{background-color: rgb(72, 138, 166);box-shadow: 0 0 10px;border-radius:10px;padding: 20px;}
/style我们现在结构中加加入refh2 reftitleTTTi9er/h2然后再脚本中加入let title ref()。这样我们就可以通过title来调用h2啦。效果如图 如果ref标注的是组件那将拿到一个组件对象实例 Test ref test/注意拿对象的时候如果对象有属性需要在源文件中明确哪些属性是能被引入的时候看到的。 主动暴露之后即可。
补充3监视对象中的单个属性
1.属性为基本类型
上篇说到watch监视对象的单个属性亲测无效此处将介绍一下监视单个属性的方法。 我们需要将watch的第一个参数监视对象改成一个函数。
watch( (){return person.game1} , (){counter1.value1} )比如这样就可以了watch可以监视的对像有四种 1.一个函数的返回值 2.ref 3.reactive 4.以上形成的数组 所以我们将我们要监视的内容包装为一个函数的返回值即可完整代码如下
templatediv class style_test h2age为:{{person.me.age}}/h2h2name为:{{person.me.name}}/h2h2game1:{{person.game1}}/h2 h2game2:{{ person.game2 }}/h2h2name1改变了:{{ counter1 }}/h2h2整个对象改变了:{{ counter2 }}/h2button clickadd_name更换第一个游戏/buttonbutton clickchange_person换人/buttonbutton clickchange_age更换年龄/button/div
/templatescriptexport default {name : Test//组件名}
/scriptscript setupimport {reactive,watch,ref} from vuelet personreactive({game1 : 原,game2 : 铲,me : {name : TTTi9er,age : 18}})let counter1 ref(0)let counter2 ref(0)function add_name(){person.game1 神启动}function change_person(){Object.assign(person.me,{name:李四,age:100})}function change_age(){person.me.age 1 }watch( (){return person.game1} , (){counter1.value1} )watch( person , (){counter2.value1} )/scriptstyle.style_test{background-color: rgb(72, 138, 166);box-shadow: 0 0 10px;border-radius:10px;padding: 20px;}
/style当参数为person的时候任意改变都能触发监听而包装为函数返回值之后只有改变返回的函数才触发监听。
2.属性为对象 watch( person.me , (){counter2.value1} )这样写可以监视修改对象地址、修改属性即只要这个对象属性发生改变的时候就能触发监视。 如果是对象属性的属性同理使用1方法就行 watch( (){return person.me.age} , (){counter2.value1} )
3.监视多个属性
需要将所监视的集合变成列表。 watch( [(){return person.me.age},() person.game1 ], (){counter2.value1} )4.watchEffect
不用写监视函数直接写逻辑判断watcheffect可以自动监视用到的变量非常方便无条件监视所有。
