当前位置:网站首页>Advanced Vue component pattern (3)
Advanced Vue component pattern (3)
2020-11-06 01:23:00 【:::::::】
03 Use mixin To enhance Vue Components
The goal is
In the previous article , Although we will toggle
Components are divided into toggle-button
、toggle-on
and toggle-off
Three sub components , And everything works well , But there are some problems in it :
-
toggle
The internal state and method of a component can only be shared with these three subcomponents , We expect that third-party components can also share these States and methods - inject We wrote the injection logic three times , If you can , We would prefer to declare only once (DRY principle )
- inject The injection logic of is currently hard coded , In some cases , We may expect dynamic configuration
If you are familiar with react The reader here may immediately think of HOC( High order component ) The concept of , And it's also react One of the most common patterns , This mode can improve react The degree of reuse and flexibility of components . stay vue in , Do we also have some means or features to improve the reusability and flexibility of components ? The answer, of course, is yes , That's it mixin.
Realization
About mixin Own knowledge , I won't go over it here , Unfamiliar readers can go to official documents to understand . We have made a declaration called toggleMixin Of mixin To pull out the public injection logic , as follows :
export const withToggleMixin = { inject: { toggleComp: "toggleComp" } };
after , Whenever you need to inject toggle
When a component provides a dependency , Just blend into the present mixin, as follows :
mixins: [withToggleMixin]
If the logic of Injection , Let's add some flexibility , For example, you want to freely declare that you want to inject dependencies key when , We can borrow from HOC The concept of , Declare a higher order mixin( Can be abbreviated HOM ?? A skin , Very happy ), as follows :
export function withToggle(parentCompName = "toggleComp") { return { inject: { [parentCompName]: "toggleComp" } }; }
This HOC mixin It can be used as follows :
mixins: [withToggle("toggle")]
So in the current component , call toggle Component related states and methods , It is no longer this.toggleComp
, It is this.toggle
.
results
By implementing toggleMixin, We managed to pull the logic out of the injection , So every time you need to share toggle
When the state and method of the component , Mix in the mixin that will do . This solves the problem that third-party components cannot share their states and methods , In the online instance code , I implemented two third-party components , Namely custom-button
and custom-status-indicator
, The former is a custom switch , Use withToggleMixin To mix in the injection logic , The latter is a custom status indicator , Use withToggle Higher order functions to mix in injection logic .
You can see the implementation code and demonstration of this component in the following link :
- sandbox: The online demo
- github: part-3
summary
mixin As a distribution Vue A very flexible way to reuse functions in components , It can be used in many scenes , Especially in some components dealing with public logic , For example, notice 、 Form error prompt, etc , This mode is especially useful .
Catalog
github gist Click preview
Participation of this paper Tencent cloud media sharing plan , You are welcome to join us , share .
版权声明
本文为[:::::::]所创,转载请带上原文链接,感谢
边栏推荐
- Linked blocking Queue Analysis of blocking queue
- 助力金融科技创新发展,ATFX走在行业最前列
- 如何玩转sortablejs-vuedraggable实现表单嵌套拖拽功能
- Process analysis of Python authentication mechanism based on JWT
- Word segmentation, naming subject recognition, part of speech and grammatical analysis in natural language processing
- Group count - word length
- 熬夜总结了报表自动化、数据可视化和挖掘的要点,和你想的不一样
- Python + appium automatic operation wechat is enough
- TRON智能钱包PHP开发包【零TRX归集】
- Summary of common string algorithms
猜你喜欢
带你学习ES5中新增的方法
Filecoin的经济模型与未来价值是如何支撑FIL币价格破千的
Flink的DataSource三部曲之二:内置connector
Summary of common algorithms of linked list
比特币一度突破14000美元,即将面临美国大选考验
一篇文章带你了解CSS3圆角知识
vue任意关系组件通信与跨组件监听状态 vue-communication
向北京集结!OpenI/O 2020启智开发者大会进入倒计时
vue-codemirror基本用法:实现搜索功能、代码折叠功能、获取编辑器值及时验证
I've been rejected by the product manager. Why don't you know
随机推荐
加速「全民直播」洪流,如何攻克延时、卡顿、高并发难题?
From zero learning artificial intelligence, open the road of career planning!
What problems can clean architecture solve? - jbogard
In order to save money, I learned PHP in one day!
Serilog原始碼解析——使用方法
[JMeter] two ways to realize interface Association: regular representation extractor and JSON extractor
Calculation script for time series data
[C / C + + 1] clion configuration and running C language
This article will introduce you to jest unit test
Windows 10 tensorflow (2) regression analysis of principles, deep learning framework (gradient descent method to solve regression parameters)
vue-codemirror基本用法:实现搜索功能、代码折叠功能、获取编辑器值及时验证
至联云分享:IPFS/Filecoin值不值得投资?
向北京集结!OpenI/O 2020启智开发者大会进入倒计时
6.4 viewresolver view parser (in-depth analysis of SSM and project practice)
Skywalking series blog 5-apm-customize-enhance-plugin
Group count - word length
Wiremock: a powerful tool for API testing
带你学习ES5中新增的方法
做外包真的很难,身为外包的我也无奈叹息。
Network security engineer Demo: the original * * is to get your computer administrator rights! 【***】