企业官网建设流程全解析

网站首页页面设计模板,wordpress rss 爬,商城手机网站建设多少钱,怎样做网站亮照亮标文章目录Ⅰ. scoped 作用及原理一、scoped 的作用二、scoped的原理Ⅱ. 父子组件通信一、介绍二、父传子#xff1a;props三、子传父#xff1a;v-on emitⅠ. scoped 作用及原理 一、scoped 的作用 默认情况下#xff0c;写在组件中的 style 样式会 全局生效props三、子传父v-on emitⅠ. scoped 作用及原理一、scoped 的作用默认情况下写在组件中的style样式会全局生效因此很容易造成多个组件之间的样式冲突问题。全局样式默认组件中的样式会作用到全局任何一个组件中都会受到此样式的影响局部样式可以给组件加上scoped属性可以让样式只作用于当前组件的标签MyLeft.vue文件script setup/scripttemplatedivclassmy-leftstyleflex:1;align-items:center;height:100px;background:paleturquoise;text-align:center;h3每天起床第一句/h3/div/templatestyleh3{color:red;}/styleMyRight.vue文件script setup/scripttemplatedivclassmy-rightstyleflex:1;align-items:center;height:100px;background:plum;text-align:center;h3先给自己打个气/h3/div/templatestyle/styleApp.vue文件script setupimportMyLeftfrom./components/MyLeft.vueimportMyRightfrom./components/MyRight.vue/scripttemplatedivclasscontainerMyLeft/MyRight//div/templatestyle.container{display:flex;}/style至此发现MyRight.vue中h3的样式受到了的影响。为了解决样式污染/冲突问题可以给组件的style添加scoped属性这样就避免了不同组件之前样式污染的问题。二、scoped的原理组件内所有标签都被添加data-v-hash值的自定义属性css选择器都被添加[data-v-hash值]的属性选择器最终效果必须是当前组件的元素才会有这个自定义属性从而保证了样式只能作用到当前组件。Ⅱ. 父子组件通信一、介绍组件通信是指一个把数组传递给另一个组件。组件的数据是独立的无法直接访问其他组件的数据。想使用其他组件的数据就需要组件通信组件之间的关系父子关系组件 A 使用了组件 B则 A 是父B 是子非父子关系比如祖先和孙子的关系兄弟关系二、父传子props当子组件的数据需要按需改变的时候就得让父组件传递数据给子组件从而提高组件的灵活性和复用性。父组件通过props自定义属性将数据传递给子组件如下所示MyButton text提交colorblue/其中text和color就是props然后子组件通过内置方法defineProps()来接收这些自定义属性如下所示script setup// 可以只写自定义属性而不需要和下面一样写完整// 完整写法如下所示// type表示类型// default表示默认值// required表示是否必填constpropsdefineProps({text:String,color:{type:String,default:blue,required:false},price:Number})/scripttemplatebutton:style{ backgroundColor: color }{{text}}/button/template在script setup中需要用到defineProps()中传入的属性时必须先拿到props对象或者解构出对应的属性否则是没办法在script setup中使用的但是在template中则不需要因为有 “语法糖” 的好处Vue会自动解包props所以不需要拿到props对象就能直接使用对应的属性下面举个例子App.vue文件script setupimportMyGoodsfrom./components1/MyGoods.vue;// 提供数据// 商品列表constgoodsList[{id:4001172,name:称心如意手摇咖啡磨豆机咖啡豆研磨机,price:289,picture:https://yanxuan-item.nosdn.127.net/84a59ff9c58a77032564e61f716846d6.jpg},{id:4001594,name:日式黑陶功夫茶组双侧把茶具礼盒装,price:288,picture:https://yanxuan-item.nosdn.127.net/3346b7b92f9563c7a7e24c7ead883f18.jpg},{id:4001009,name:竹制干泡茶盘正方形沥水茶台品茶盘,price:109,picture:https://yanxuan-item.nosdn.127.net/2d942d6bc94f1e230763e1a5a3b379e1.png},{id:4001874,name:古法温酒汝瓷酒具套装白酒杯莲花温酒器,price:488,picture:https://yanxuan-item.nosdn.127.net/44e51622800e4fceb6bee8e616da85fd.png},{id:4001649,name:大师监制龙泉青瓷茶叶罐,price:139,picture:https://yanxuan-item.nosdn.127.net/4356c9fc150753775fe56b465314f1eb.png},{id:3997185,name:与众不同的口感汝瓷白酒杯套组1壶4杯,price:108,picture:https://yanxuan-item.nosdn.127.net/8e21c794dfd3a4e8573273ddae50bce2.jpg},{id:3997403,name:手工吹制更厚实白酒杯壶套装6壶6杯,price:100,picture:https://yanxuan-item.nosdn.127.net/af2371a65f60bce152a61fc22745ff3f.jpg},{id:3998274,name:德国百年工艺高端水晶玻璃红酒杯2支装,price:139,picture:https://yanxuan-item.nosdn.127.net/8896b897b3ec6639bbd1134d66b9715c.jpg}]/scripttemplatedivclasslist!--在子组件中传入自定义属性--MyGoods v-foritem in goodsList:keyitem.id:imgUrlitem.picture:priceitem.price:titleitem.name//div/templatestyle langscss*{margin:0;padding:0;box-sizing:border-box;}.list{width:1000px;margin:0auto;display:flex;flex-wrap:wrap;}/style子组件MyGoods.vuescript setupdefineProps([imgUrl,title,price])// 采用简写的方式不要求具体的类型等/scripttemplatedivclassitemimg:srcimgUrl:alttitle/pclassname{{title}}/ppclassprice{{price}}.00/p/div/templatestyle langscssscoped.item{width:240px;margin-left:10px;padding:20px 30px;transition:all0.5s;margin-bottom:20px;.item:nth-child(4n){margin-left:0;}:hover{box-shadow:0px 0px 5pxrgba(0,0,0,0.2);transform:translate3d(0,-4px,0);cursor:pointer;}img{width:100%;}.name{font-size:18px;margin-bottom:10px;color:#666;}.price{display:flex;align-items:center;font-size:22px;color:firebrick;button{margin-left:48px;font-size:14px;outline:none;}}.price::before{content:¥;font-size:22px;}}/style三、子传父v-onemit在上面父传子的案例中如果新增一个砍价功能的按钮会发现子组件不能直接修改父组件传递的数据因为props是只读的子组件不能修改。解决方案在父组件中提供砍价功能对应的方法然后在使用子组件的时候将该方法绑定起来和props一起发送给子组件。绑定的语法实际上就是v-on如下所示自定义事件父组件中修改数据的函数在子组件中通过defineEmits()拿到触发自定义事件的函数emit()然后在砍价按钮中绑定点击事件在该点击事件中去触发自定义事件此时该自定义事件就会发送到父组件父组件就会执行砍价功能对应的方法。emit()方法参数如下所示emit(自定义事件,父组件中对应方法所需的参数...)defineEmits()本质是一个编译宏用于生成一个 “事件触发器函数”通常叫emit而emit才是真正用来发射事件的函数所以不要搞错直接拿defineEmits()去发射事件那就错了App.vue文件script setupimportMyGoodsfrom./components2/MyGoods.vue;import{ref}fromvue// 商品列表constgoodsListref([{id:4001172,name:称心如意手摇咖啡磨豆机咖啡豆研磨机,price:289,picture:https://yanxuan-item.nosdn.127.net/84a59ff9c58a77032564e61f716846d6.jpg},{id:4001594,name:日式黑陶功夫茶组双侧把茶具礼盒装,price:288,picture:https://yanxuan-item.nosdn.127.net/3346b7b92f9563c7a7e24c7ead883f18.jpg},{id:4001009,name:竹制干泡茶盘正方形沥水茶台品茶盘,price:109,picture:https://yanxuan-item.nosdn.127.net/2d942d6bc94f1e230763e1a5a3b379e1.png},{id:4001874,name:古法温酒汝瓷酒具套装白酒杯莲花温酒器,price:488,picture:https://yanxuan-item.nosdn.127.net/44e51622800e4fceb6bee8e616da85fd.png},{id:4001649,name:大师监制龙泉青瓷茶叶罐,price:139,picture:https://yanxuan-item.nosdn.127.net/4356c9fc150753775fe56b465314f1eb.png},{id:3997185,name:与众不同的口感汝瓷白酒杯套组1壶4杯,price:108,picture:https://yanxuan-item.nosdn.127.net/8e21c794dfd3a4e8573273ddae50bce2.jpg},{id:3997403,name:手工吹制更厚实白酒杯壶套装6壶6杯,price:100,picture:https://yanxuan-item.nosdn.127.net/af2371a65f60bce152a61fc22745ff3f.jpg},{id:3998274,name:德国百年工艺高端水晶玻璃红酒杯2支装,price:139,picture:https://yanxuan-item.nosdn.127.net/8896b897b3ec6639bbd1134d66b9715c.jpg}])// 砍价功能对应的方法由父组件提供constbargain(index,price){goodsList.value[index].price-price}/scripttemplatedivclasslist!--在子组件中传入自定义属性--MyGoods v-for(item, index) in goodsList:keyitem.id:urlImgitem.picture:priceitem.price:titleitem.name:idxindexcccbargain//div/templatestyle langscss*{margin:0;padding:0;box-sizing:border-box;}.list{width:1000px;margin:0auto;display:flex;flex-wrap:wrap;}/styleMyGoods.vue文件templatedivclassitemimg:srcurlImg:alttitle/pclassname{{title}}/ppclasspricespan{{price}}.00/spanbutton clickcutPrice砍价/button/p/div/templatescript setupconstpropsdefineProps([urlImg,title,price,idx])constemitdefineEmits();constcutPrice(){emit(ccc,props.idx,3);}/scriptstyle scoped.item{width:240px;margin-left:10px;padding:20px 30px;transition:all0.5s;margin-bottom:20px;.item:nth-child(4n){margin-left:0;}:hover{box-shadow:0px 0px 5pxrgba(0,0,0,0.2);transform:translate3d(0,-4px,0);cursor:pointer;}img{width:100%;}.name{font-size:18px;margin-bottom:10px;color:#666;}.price{font-size:22px;color:firebrick;display:flex;align-items:center;height:36px;button{font-size:14px;margin-left:50px;}}.price::before{content:¥;font-size:22px;}}/style