[{"createTime":1735734952000,"id":1,"img":"hwy_ms_500_252.jpeg","link":"https://activity.huaweicloud.com/cps.html?fromacct=261f35b6-af54-4511-a2ca-910fa15905d1&utm_source=V1g3MDY4NTY=&utm_medium=cps&utm_campaign=201905","name":"华为云秒杀","status":9,"txt":"华为云38元秒杀","type":1,"updateTime":1735747411000,"userId":3},{"createTime":1736173885000,"id":2,"img":"txy_480_300.png","link":"https://cloud.tencent.com/act/cps/redirect?redirect=1077&cps_key=edb15096bfff75effaaa8c8bb66138bd&from=console","name":"腾讯云秒杀","status":9,"txt":"腾讯云限量秒杀","type":1,"updateTime":1736173885000,"userId":3},{"createTime":1736177492000,"id":3,"img":"aly_251_140.png","link":"https://www.aliyun.com/minisite/goods?userCode=pwp8kmv3","memo":"","name":"阿里云","status":9,"txt":"阿里云2折起","type":1,"updateTime":1736177492000,"userId":3},{"createTime":1735660800000,"id":4,"img":"vultr_560_300.png","link":"https://www.vultr.com/?ref=9603742-8H","name":"Vultr","status":9,"txt":"Vultr送$100","type":1,"updateTime":1735660800000,"userId":3},{"createTime":1735660800000,"id":5,"img":"jdy_663_320.jpg","link":"https://3.cn/2ay1-e5t","name":"京东云","status":9,"txt":"京东云特惠专区","type":1,"updateTime":1735660800000,"userId":3},{"createTime":1735660800000,"id":6,"img":"new_ads.png","link":"https://www.iodraw.com/ads","name":"发布广告","status":9,"txt":"发布广告","type":1,"updateTime":1735660800000,"userId":3},{"createTime":1735660800000,"id":7,"img":"yun_910_50.png","link":"https://activity.huaweicloud.com/discount_area_v5/index.html?fromacct=261f35b6-af54-4511-a2ca-910fa15905d1&utm_source=aXhpYW95YW5nOA===&utm_medium=cps&utm_campaign=201905","name":"底部","status":9,"txt":"高性能云服务器2折起","type":2,"updateTime":1735660800000,"userId":3}]
1. 自定义指令
2. 数据双向绑定::value + @input
v-model作用于表单元素
自定义组件使用v-model之后,父组件不用再监听子组件的事件触发
.sync语法糖
3. 组件通信
1. 跨层级访问:$emit,组件过多时会很麻烦,vue提供了$root和$parent两个属性(强耦合),访问组件根节点和父节点,父组件通过ref访问子组件
2.
依赖注入:父组件provide对应属性,子组件通过injected去使用provide提供的数据,injected的内部通过$parent往父节点找对应的属性,所以依然还是强耦合
3. 组件二次封装:修改第三方库样式的时候,使用>>>,就可以了,不用再单独开一个style
这是一个对element
input的组件的二次封装,vue提供了$attrs和$listeners,方便开发二次封装,这样就不用单独去实现自定义组件的v-model,还有el-input对应的各个方法
4. vue插件
Mixins: 生命周期钩子函数在组件的钩子函数之前执行,methods如果有重名的,使用组件中的method
插件:Vue.use(plugin)
5. vue代码的复用方案:
1. Mixin
2. HOC Hihger order component 函数接收组件作为参数,并返回一个新的组件
3. RenderLess组件
// 带插槽的父组件 SearchWrapper.vue <slot name="searchContent" :data="advanced" /> //
子组件中使用父组件的数据 <search-wrapper @search="searchWarehouseAreaList"
@reset="resetForm"> <a-form-model ref="searchForm" :labelCol="{ span: 5 }"
:wrapperCol="{ span: 18, offset: 1 }" :model="searchModel" layout="horizontal"
slot="searchContent" slot-scope="scopeData"> //
这里的scopeData.data指向父组件的:data,也就是advanced