Comments (4)
@jaulz the user attributes (the ones added directly on the component) are not merged to the attributes
(like it happens with the props) so depending on what you need you may want to merge them, you just need to know that $attrs
is a property that is built-in with Vue and contains the user attributes and useConfiguration().attributes
is a property that contains the attributes added in the configuration (without the ones in the $attrs
property)
Notice that in some cases you don't need to merge them since vue automatically adds the attributes to the main container of the component. If you see components like the https://github.com/variantjs/vue/blob/main/src/components/TButton.vue I am not merging anything if the user adds any custom attribute it will override any other property defined on the configuration
from vue.
@jaulz configuration
returns everything that is defined on the props merged with the default settings and the user configuration
attributes
returns everything that is not a prop and is in the user configuration
If you create your own component and let say you named it TMyComponent
and then you add a configuration like
TMyComponent: { somethingThatIsInTheProps: 'bar', somethingThatIsNotInTheProps: 'foo' }
configuration will contain somethingThatIsInTheProps
and attributes
somethingThatIsNotInTheProps
The attributes make sense in components like inputs and buttons since manually defining all the attributes they can have as props is not practical but by using the attributes I am still allowing the user to add as many attributes as they want (in the configuration) without needed to explicitly add a prop, for example, lets you want to mark all the buttons as type="button"
, if you see the TButton source code you will notice that there is no such props as type
from vue.
In summary, the attributes are my solution for grabbing all the custom data that is not defined as a prop that the user pass to the component in the initial component configuration
from vue.
Ah, thanks a lot for the quick response! $attrs
viav-bind="{ ...$attrs, attributes }"
is only necessary if the rendered component is not a top level component, right?
from vue.
Related Issues (20)
- 🚨🩳 On vacation until November 8th HOT 5
- Treeshaking working? HOT 3
- -
- -
- TDialog not available HOT 1
- yarn-error.log should not be committed HOT 1
- Autofocus Rich select in combination with Modal HOT 3
- TRichSelect changed event is not working HOT 2
- How to custom variant for Alert or Button with Laravel Inertia Vue3? HOT 1
- Should TInput have type="text" attribute set by default?
- Demo Source HOT 2
- TRichSelect missing styling HOT 2
- [Vue warn]: Failed to resolve component: t-alert
- [ TRichSelect ] Question / Feature
- TInput Variant not working
- TInputGroup: variants css overwrites props HOT 1
- 🚨 [Important] project status HOT 2
- How to apply the default tailwind css styles to variantjs HOT 1
- can not awoid popperjs/core,
Recommend Projects
-
React
A declarative, efficient, and flexible JavaScript library for building user interfaces.
-
Vue.js
🖖 Vue.js is a progressive, incrementally-adoptable JavaScript framework for building UI on the web.
-
Typescript
TypeScript is a superset of JavaScript that compiles to clean JavaScript output.
-
TensorFlow
An Open Source Machine Learning Framework for Everyone
-
Django
The Web framework for perfectionists with deadlines.
-
Laravel
A PHP framework for web artisans
-
D3
Bring data to life with SVG, Canvas and HTML. 📊📈🎉
-
Recommend Topics
-
javascript
JavaScript (JS) is a lightweight interpreted programming language with first-class functions.
-
web
Some thing interesting about web. New door for the world.
-
server
A server is a program made to process requests and deliver data to clients.
-
Machine learning
Machine learning is a way of modeling and interpreting data that allows a piece of software to respond intelligently.
-
Visualization
Some thing interesting about visualization, use data art
-
Game
Some thing interesting about game, make everyone happy.
Recommend Org
-
Facebook
We are working to build community through open source technology. NB: members must have two-factor auth.
-
Microsoft
Open source projects and samples from Microsoft.
-
Google
Google ❤️ Open Source for everyone.
-
Alibaba
Alibaba Open Source for everyone
-
D3
Data-Driven Documents codes.
-
Tencent
China tencent open source team.
from vue.