网站设计与优化,专业团队建设方案,长沙有实力seo优化,网站建站的书籍目录 Scoped
作用
*原理
组件通信
前置知识
什么是组件通信
为什么需要组件通信
如何进行组件通信
如何辨别两个组件的关系
父子组件通信
父传子
子传父
非父子组件通信
祖先传后代
语法
任意两个组件通信
步骤
Props校验
props是什么
作用
语法
组件的…目录 Scoped
作用
*原理
组件通信
前置知识
什么是组件通信
为什么需要组件通信
如何进行组件通信
如何辨别两个组件的关系
父子组件通信
父传子
子传父
非父子组件通信
祖先传后代
语法
任意两个组件通信
步骤
Props校验
props是什么
作用
语法
组件的ref/reactive数据与props的区别 Scoped
作用
默认情况下写在任何一个.vue文件中style的样式是全局样式这样的话不仅会影响当前组件也会影响其他组件。全局样式会影响每个vue文件存在样式污染/冲突的问题style不添加scoped默认都是全局样式。局部样式只针对当前组件中的标签生效不会影响其他组件的标签如果想让样式变为局部样式那么需要给style添加scoped属性。
综上scoped的作用就是防止不同组件vue文件样式污染//冲突。
*原理
当给组件的style添加了scoped属性之后组件会发生如下变化
scoped会给当前组件内的所有标签添加一个自定义属性名为data-v-xxxxxxxx。scoped会用这个属性选择器[data-v-xxxxxxxx]配合我们编写的选择器形成一个交集选择器。每个组件只要添加scoped属性都会生成唯一的data-v-xxxxxxxx自定义属性。换句话说每个组件生成的这个属性名都不同因此形成的交集选择器只能选中当前组内的标签保证了不会发生样式污染。
如下表示既是h3又具备data-v-7b1a1c5e属性的 h3[data-v-7b1a1c5e]{ color:blue; } 组件通信
前置知识
什么是组件通信 一个组件把数据传递给另一个组件。
为什么需要组件通信 开发Vue3的项目是借助了组件化的开发思想不会把代码写在同一个文件中而是会拆分一系列组件进而通过组件的组装拼装成完整的页面这里难免需要进行组件间的数据传递那么就需要组件通信了。
总的来说可以归结于两点
每个组件是一个独立的模块组件的数据别的模块无法使用。别的组件需要用到当前组件的数据那么就需要组件通信了。
如何进行组件通信
需要辨别两个组件的关系进而选择不同的通信方案
1、父子组件掌握
父传子props自定义属性子传父emit自定义事件
2、非父子组件了解
祖先与后代provide() inject()兄弟组件eventBus(事件总线)跨组件通信方案Pinia状态管理
如何辨别两个组件的关系
父子关系谁被使用谁就是子组件当前组件就是父组件
父子组件通信
父组件通过props将数据传递给子组件子组件通过emit将数据传递给父组件。
父传子
当子组件的数据不固定的时候也就是子组件的数据不能写死就需要父传子。
父传子的语法
子组件通过defineProps( )接收自己需要的数据进而使用数据。子接父组件内子组件的自定义标签上通过自定义属性传递数据。父传
子组件
这里数组的名字自定义不是固定的。
script setupdefineProps([imgUrl,title,price])
/script父组件
script setupimport MyGoods from ./components/MyGoods.vue//父组件提供的数据const goodsObj{id:123456,name:kkk,price:150,picture:https://test.com}
/script
templateMyGoods :imgUrlgoodsObj.picture/
/template
总结
子接defineProps([数据名称1数据名称2])父传自定义属性名值
子传父
当子组件需要修改父组件的数据props接收的数据是只读的不能修改就需要使用子传父。
而子传父的的语法是
父组件提供修改数据的方法/函数,并在子组件的自定义标签上绑定自定义事件。子组件在恰当的时机触发/调用父组件修改数据的方法/函数。
子组件
templatebutton clickonCut砍价/button
/templatescript setupimport { ref } from vueconst propsdefineProps([imgUrl,title,price,idx])//拿到触发自定义事件的函数 emitconst emitdefineEmits()//定义子组件砍价按钮,emit传入父组件给出的修改函数和需要的参数const onCut(){emit(ccc,props.idx,1)}
/script
父组件
templateMyGoods cccsubPrice/
/templatescript setupimport MyGoods from ./components/MyGoods.vueconst subPrice (i,price) {goodsList.value[i].price - price}
/script
总结
父监听/绑定自定义事件父修改数据的函数子触发/通知emit(自定义事件传递的参数.....)
非父子组件通信
祖先传后代
作用实现跨层级数据传递
语法
祖先组件提供数据 provide(数据名称,数据) 示例
script setupimport {ref,provide} from vueconst moneyref(1000)provide(money,money)
/script
后代组件获取数据 const 数据inject(数据名称) 示例
script setupimport {ref,inject} from vueconst moneyinject(money)
/script
任意两个组件通信
EventBus可以实现任意两个组件通信但是使用较为麻烦能不使用便不使用。
步骤
前提需要一个中间者媒婆
创建一个中间者模块确定消息的发送方中间者.emit事件名称,数据确定消息的接收方中间者.on(事件名称,(数据){ })
中间者采用第三方模块mitt步骤如下
1、安装mitt npm install --save mitt 2、与App.vue同级创建一个eventBus.js文件在这创建一个中间人并导出 import mitt frommitt//创建中间人
const meipomitt()//默认导出目的是给其他组件可以拿到meipo这个中间人
export default meipo
3、发送方
template
divbutton clickonSendSend/button
/div
/templatescript setupimport {ref} from vueimport meipo from ../eventBus.jsconst msgref(12345678)const onSend(){meipo.emit(sendMsg,msg.value)}
/script
4、接收方
script setupimport {ref} from vueimport meipo from ../eventBus.jsmeipo.on(sendMsg,(msg){console.log(msg.value)})
/script
Props校验
props是什么
如上面父子组件通信时使用到的绑定在组件标签上的自定义属性就是props
MyGoods :imgUrlgoodsObj.picture/
作用 当我们在进行props传属性值时可能会出现类型不匹配之类的情况因此我们需要为prop指定验证要求不符合要求控制台就会有错误提示以此来提高代码的健壮性。 换句话说子组件接收的是什么样的props那么父组件在传递的时候也必须按照这个规则来传递双方都得遵守的一种协议。
语法
1、数组接收法 defineProps([imgUrl,title]) 优点简单、上手快。缺点无法对接收的props进行校验健壮性差。
2、对象接收法简易写法校验只校验类型 defineProps({ title:String imgUrl:String }) 优点可以对props做校验健壮性相对好点。缺点写法相对复杂些。
3、完整写法校验
简易写法的校验只能验证数据类型在某些情况下可能需要要求数据必须传等条件此时简易写法便不能满足要求。
语法 defineProps({ 属性名:{ type:Number, //数据类型约束 default:50, //默认值与required:true冲突如果同时出现required优先级更高 required:true/false //是否必须传值默认不是必须传值 } }) 但是如果需要校验数据的范围此时上述的方法便无法满足要求就需要使用自定义校验函数 defineProps({ 属性名:{ type:Number, //数据类型约束 default:50, //默认值与required:true冲突如果同时出现required优先级更高 required:true/false //是否必须传值默认不是必须传值 validator(value){ //value是实际props传递的值 if(value0) { console.error(!) return fasle } return true } } }) 组件的ref/reactive数据与props的区别
相同点
都可以为组件提供数据进而使用
不同点
ref/reative数据是组件自己的数据组件既可以获取也可以修改props数据 本质是由父组件提供的数据子组件拿到这个数据之后只能获取不能直接修改遵循单向数据流原则想要修改需要用到子传父的方法。
