In vue 3, when we use composition, we are declaring variable using ref. Then, when we actually use the variable to the template the declared variable in the script section still showed as unused and there's warning
any plugin or configuration for this?
Related
Problem desription
I am trying to access Vue child components passed in a slot.
I do it with the following approach:
this.$slots.default()
I receive the components and I can even access and call methods of a component using the following approach:
this.$slots.default()[1].type.methods.methodName
The problem is that within the child component this keyword has now changed to another type where you can only access methods defined in that component and restricted variables. And so for example you can't access this.$refs (which I actually need) or this.$el or anything else except defined methods and some variables.
What I've tried
I've tried assigning this.$refs to a variable within the onmount function and then trying to access it when calling a method from the parent component, but you can't access that variable.
In Vue2 you have full access to the child component and this would work.
Is there a way to fix it in Vue3?
This question already has answers here:
Pass data to a directive?
(2 answers)
Closed 1 year ago.
I am creating a component system that will let other developers write vue applications with the components to quickly get up and running with simple forms.
My components are very general, and expect plain values to be bound to their value property, and will emit plain values with their input events.
The data we want the components to control is complex. I've read that you cannot use classes as vue data, because vue expects plain javascript objects for data. So each piece of data is an object like
{
_value: ...
setVal(): ...
getVal(): ...
}
And we are binding like
<my-component
:value="dataObject.getVal()"
#input="dataObject.setVal($event)"
/>
I thought it might be possible to write a vue directive to shorthand those properties, like how v-model is a shorthand for :value and #input normally, so that I could write
<my-component v-my-directive="dataObject" />
and it automatically binds the right thing to :value and the right thing to #input, but it doesn't seem to be that simple. I've found tutorials that mention twoway for Vue v1 directives, but that was removed in Vue v2, which recommended using a wrapper component as a replacement. But we have a large library of components, writing and maintaining a wrapper for each one seems out of line for just creating a shorthand like what already exists. Is there any other way?
vue2 only allows v-model directive to be bound to :value/#input. So you need to use both v-bind and #on directives for 2 way binding.
vue3 combines these using a convention that allows for multiple v-model bindings
You create a prop called 'foo' and emit and event called 'update:foo' with the value you want to assign to it.
The parent component uses v-model:foo to bind to it.
How can I use a Vue computed property in more than once place but only make the computed property function run only once and not once for every single time that I use it?
I am using the computed function output in 4 places, this makes the function call to the computed property run 4 times!
Computed properties are actually cached in Vue as the documentation says:
computed properties are cached based on their reactive dependencies. A
computed property will only re-evaluate when some of its reactive
dependencies have changed.
Maybe we can figure out what is the problem if you provide a code sample
I always wanted to ask the following questions regarding the Vue Reactivity System.
I have read in Vue docs that it is recommended to keep the data of components as plain JS objects over being class objects. Same goes for individual properties of components data.
Why is this recommendation?
What is the problem with having data as instances of class objects?
What edge cases are caused by using getters/setters and methods inside of component data? (this is my main question here)
I have also another question about Vue Reactivity System.
Can I directly change component computed getters/setters and methods at runtime without having problems with Vue Reactivity System?
Are changed computed getters/setters still be cached and optimized?
Are changed methods going to be accessible from component template?
Can I add new computed getters/setters and methods at runtime? How?
Thank you very much!
Vue reactivity system (but i suppose i can extend it to all other reactive framework/lib/whatever) is just an implementation of the observer pattern . In the specific case, the observer function is fired when a property value (data, computed getter result, vuex state) changes. if the property is an integer and its value is 2, is easy for vue to check out that at some point of time it has become '3', after a comparison, fired with a mutation, a vdom change etc...and this is same for other primitive types. When structured object come into play, the comparison between values is still made, but this time the value will be a reference to the object. If the reference doesn't change, vue cannot know that something has changed, so just doesn't react....
if you set val 3 = 'foo' before and val 3 = 'bar' after, the 'val' array is still the same object in the same heap area, so you should clone it, or better use Vue.set()
I want to use page specific styles such as contact.css (compiled) applied only to i.e. Contacts page.
I have a screen.css compiled which imports the _base.css that contains global variables, custom mixins, classes, etc., but the trouble is that I cannot use contact.css style if it contains global variables from _base.css — even with the screen.css set before contact.css (link) it always outputs error. And if I import the variables into the contact.scss itself I then get duplicate styles.
What should I do, how can I target a specific page and retain global variables in Sass?
Thanks.
Create _globalvariables.scss and import that where you need it, including _base.scss.
For your screen.scss (or whatever), import _base.scss, for sheets such as contact.scss that only need the variables, only import in _globalvariables.scss.
In other words, keep your mixins and variables in a sheet without anything that will be compiled to CSS directly, so you can import it where you want without having to deal with duplicate style declarations.