Problems with modifying props directly in vuejs vuex - javascript

I'm working in this web app, trying to build a searchbar filter which allows me to do my own query from writing whatever I want (if the API contains the data), but throws me always the same error:
Avoid mutating a prop directly since the value will be overwritten whenever the parent component re-renders. Instead, use a data or computed property based on the prop's value. Prop being mutated: "Search".
I was looking on some of your responses, trying to apply them to my case, but them gives me a massive error, turned to worst, here is part of my code, my original one:
<v-container>
<input class='input'
#input='sendingSelfSearch'
placeholder="write words for search"
type="text"
v-model="Search"
/>
</v-container>
</template>
<script>
export default {
name: "SearchBar",
props: {
SearchBar:Object,
Search:String
},
methods:{
sendingSelfSearch(){
this.$emit('receivingSelfSearch',this.Search)
}
}
};
</script>
And in this second part I'm receiving that component from 'Search' (component) to 'Home' (view):
<template>
<div class="home">
<img class='body' src='../assets/alli.jpg'/>
<SearchBar #receivingSelfSearch='autoSearch' v-bind:Search='Search'></SearchBar>...
</template>
<script>
import {mapGetters} from 'vuex'
import Filters from '../components/Filters.vue'
import SearchBar from '../components/SearchBar.vue'
export default {
name: 'home',
components: {
Filters,
SearchBar
},
data(){
return {
listCountries:'',
listEvents:'',
listModalities:'',
Search:'',
}
},
methods:{
autoSearch(text){
this.Search=text
},
},
computed:{
autoSearchFilter(){
some code
}
...the result of the query shows, but at same time I have this error in the devtool console, thus despite of being working is not 'correct' somehow.
Any suggestions regarding this code where I should improve please?

Error is because you are modifying Search prop by using v-model on your input (SearchBar component)
Do this instead:
<v-container>
<input class='input'
placeholder="write words for search"
type="text"
v-model="searchPhrase"
/>
</v-container>
</template>
<script>
export default {
name: "SearchBar",
props: {
Search: String
},
computed: {
searchPhrase: {
get() { return this.Search }
set(val) { this.$emit('receivingSelfSearch', val) }
}
}
};
</script>
How using computed property for v-model works:
Child receives prop Search from the parent (parent owns the data - it has Search in data())
When the Child is rendering and needs initial value for the input, it calls getter (get() method) which returns value of Search prop
When user changes content of input, Vue will do something like searchPhrase = new value, which in turn calls setter
Setter emits the event with new value as an event payload
Parent listener gets a new value and assign it into the Search data variable (#receivingSelfSearch='autoSearch')
Vue detects the Search is changed and update Child component, updating Search prop inside the Child to a new value

Related

VuetifyJS: Access v-form disabled state in child components

The Vuetify component v-form knows a disabled property, which is published down to child vuetify components like v-text-field, v-input etc. When the disabled property of the v-form is set to true, all child input fields are also (automatically) disabled.
But this only works for Vuetify v-input-like fields, but it seems that this does not work for own components. I want to be able to "inherit" the disabled prop
in a child component (to do my own disabled UI).
I don't want to pass the reactive data prop (formDisabled in my example), as this is too tedious: There would be a large nested bunch of components that all
explicitely would need the reactive data prop, which I don't want to implement: Obviously it IS working with Vuetify's own components, but how can I achieve
the same by myself?
An example:
<template>
<v-form :disabled="formDisabled">
<!--
works, even WITHOUT explicitely binding formDisabled:
textfield gets en-/disabled according to the form state:
-->
<v-text-field />
<!-- does NOT work: Withoud bind the formDisabled prop,
I cannot get the form's disabled state in my own component: -->
<MyOwnComponent />
</v-form>
<v-btn #click="formDisabled = !formDisabled">Toggle</v-btn>
</template>
<script>
export default {
data() {
return {
formDisabled: true
};
},
};
</script>
So how can I find out the form's disabled state, WITHOUT binding the formDisabled data prop explicitely to every own form child component?
Have a look at v-input, it is the base for Vuetify inputs, you can use it to build Vuetify-like inputs which resolve disabled state (and all other validation) same as other Vuetify components.
If this does not work for you, you can manually resolve the disabled state similar to what Vuetify/v-input does, where the disabled state is propagated from form to inputs through injection.
In Vuetify 3, I can inject the form like this (using composition API):
const form = inject(Symbol.for("vuetify:form"))
or like this:
import {useForm} from 'vuetify/lib/composables/form'
const form = useForm()
which gives me an object of this interface:
interface FormProvide {
register: (item: {
id: number | string
validate: () => Promise<string[]>
reset: () => void
resetValidation: () => void
}) => void
unregister: (id: number | string) => void
update: (id: number | string, isValid: boolean | null, errorMessages: string[]) => void
items: Ref<FormField[]>
isDisabled: ComputedRef<boolean>
isReadonly: ComputedRef<boolean>
isValidating: Ref<boolean>
validateOn: Ref<FormProps['validateOn']>
}
And then in your component (from vuetify/lib/composables/validation):
const isDisabled = computed(() => !!(props.disabled || form != null && form.isDisabled.value));
In Vuetify for Vue 2, the whole form object is provided as "form", so this should work (I don't have a vue2 project to test it):
export default {
inject: ['form'],
created() {
console.log(this.form)
}
}
One workaround for this problem statement is to use global mixin, which will be applied to every Vue instance without explicitly passing as a prop for each and every child component.
As formDisabled is a read only property for each child, Here is the live demo :
Note : Just for a demo purpose, I am demoing it in a pure Vue format, but you can modify it as per vuetify components and test.
// This is a global mixin, it is applied to every vue instance.
// Mixins must be instantiated *before* your call to new Vue(...)
Vue.mixin({
data: function() {
return {
get formDisabled() {
return true;
}
}
}
})
Vue.component('child', {
template: '<input type="text" :disabled="formDisabled"/>'
});
new Vue({
el: '#app'
});
<script src="https://cdnjs.cloudflare.com/ajax/libs/vue/2.1.3/vue.js"></script>
<div id="app">
<form :disabled="formDisabled">
<child></child>
</form>
</div>

Vue - Access prop in child component, regular javascript

I am loading a Vue component from another Vue component and am passing a property to that component. I need to access this property in the regular javascript of that component, but cannot figure out how to do this.
The simplified parent component could look as follows:
<template>
<div>
<MenuEdit :menu-list="menuList"></MenuEdit>
</div>
</template>
<script>
import MenuEdit from '#/components/MenuEdit';
export default {
name: 'Admin',
data: function () {
return {
menuList: ["Item1","Item2","Item3","Item4"]
};
},
components: {
MenuEdit
}
}
</script>
<style scoped>
</style>
And the MenuEdit could look as follows:
<template>
<div>
{{ menuList }}
</div>
</template>
<script>
//console.log(this.menuList) // Does not work.
export default {
name: 'MenuEdit',
props: [
'menuList'
],
methods: {
testMenu: function() {
console.log(this.menuList) //This works fine
}
}
}
</script>
<style scoped>
</style>
EDIT
To add some context to the question, I am implementing sortablejs on Buefy using the following example: https://buefy.org/extensions/sortablejs
Instead of calling "vnode.context.$buefy.toast.open(Moved ${item} from row ${evt.oldIndex + 1} to ${evt.newIndex + 1})" at the end of the first const, I want to update the component (or better said, update the related Array).
In the example, the const are defined outside of the component, which is why I ended up with this question.
You cannot access the prop as that code (where your console.log is) runs before the component is mounted, before it's even declared really
If you want to access stuff when the component is first mounted, you can use the mounted lifecycle method

How to access native HTML element in template of functional component in Vue.js?

I'm trying to create a custom checkbox component with the Vue.js 2.6. I want to make it stateless, so it takes value as a prop, and creates event to the parent component on the user input, and doesn't hold any data itself.
This is my single-file component (simplified):
<script lang="ts">
import Vue from 'vue';
export default Vue.extend({
functional: true,
props: {
value: {
type: Boolean,
default: false,
},
},
});
</script>
<template functional lang="pug">
label
input(type="checkbox" :checked="value" ref="input"
//-#input="(listeners['input'] || (() => {}))($refs.input.checked)")
#input="(listeners['input'] || (() => {}))($event.target.checked)")
</template>
Which generates this render function:
var render = function(_h, _vm) {
var _c = _vm._c
return _c("label", [
_c("input", {
ref: "input",
attrs: { type: "checkbox" },
domProps: { checked: _vm.value },
on: {
input: (_vm.listeners["input"] || function() {})(
//_vm.$refs.input.checked
_vm.$event.target.checked // Got error on this line
)
}
})
])
}
var staticRenderFns = []
render._withStripped = true
Parent component:
<template lang="pug">
form
checkbox(:value="value" #input="value = $event")
//-checkbox(v-model="value") - also should work
</template>
<script lang="ts">
import Vue from 'vue';
import { default as Checkbox } from './checkbox.vue';
export default Vue.extend({
components: {
checkbox: Checkbox,
},
data() {
return { value: false };
},
});
</script>
When native input element creates an input event, I want to pass the checked property of the input to the parent component listener (if it is exists).
I have tried to use $event.target.checked and $refs.input.checked in the event handler to get the checked property, but realized that I haven't direct access to them in a functional template:
TypeError: "_vm.$refs is undefined"
So, is there a way to access a native HTML element, that creates an event, in attached to it event handler, in a functional component template? I have searched documentation for this topic, but didn't find much.
Or should I just use a stateful component in this case?
You can, but not in an expected way. The thing is with functional components that they pass their refs up the tree. So your ref 'input' will appear in the component that includes your functional checkbox. If you try to attach a ref using template on your functional component, it will simply fail.
So the following wouldn't work (in your parent component), ref 'check' will not be there. But ref 'input' will be, at least the last one, if you put multiple checkboxes.
<form>
<functional-checkbox ref="check" :value="myValue" #input="myValue = $event"/>
</form>
But the following will
<form>
<functional-checkbox :value="myValue" #input="myValue = $event"/>
</form>
// later in code (assuming functional-checkbox has ref="input" defined inside)
this.$refs.input // will have a value, when the component is _mounted_
Regarding your problem with a functional checkbox component - there is a much simpler fix. You just need to define your handler as a function call as it is understood by Vue template compiler. It's not perfect, which is why despite you having created a function call, it is not being interpreted as such.
So you would need to simplify your function call a bit like this
<template functional>
<label>
<input type="checkbox" :checked="props.value"
#input="listeners.input && listeners.input($event.target.checked)">
</label>
</template>
Which would be interpreted as desired
var render = function(_h, _vm) {
var _c = _vm._c
return _c("label", [
_c("input", {
attrs: { type: "checkbox" },
domProps: { checked: _vm.props.value },
on: {
input: function($event) {
_vm.listeners.input && _vm.listeners.input($event.target.checked)
}
}
})
])
}
You can take a more detailed look here, if you're interested about how exactly this render function comes to be
https://github.com/vuejs/vue/blob/dev/packages/vue-template-compiler/browser.js#L4169

[Vue warn]: Avoid mutating a prop directly since the value will be overwritten whenever the parent component re-renders

I am learning vuejs but I can't find a proper answer. When i am clicking on edit age button or change my name button i am getting below error.
[Vue warn]: Avoid mutating a prop directly since the value will be overwritten whenever the parent component re-renders. Instead, use a data or computed property based on the prop's value. Prop being mutated: "myName"
[Vue warn]: Avoid mutating a prop directly since the value will be overwritten whenever the parent component re-renders. Instead, use a data or computed property based on the prop's value. Prop being mutated: "userAge"
Code is here.
https://codesandbox.io/s/k2197nr4o3
Please let me know what is wrong in this code.
It is obvious that you are trying to change directly the props properties.
For example:
props: { name: 'something' }
methods: {
change_name(new_name) {
this.name = new_name
}
}
This is not recommended and it may lead on reactivity lack.
As solution, you can use parent child communication. So whenever you want to change a prop, just emit an event to the parent component. So the above example should be:
props: { name: 'something' }
methods: {
change_name(new_name) {
this.$emit('name-updated', new_name)
}
}
And on the parent component listen to that event to change the prop you are passing:
<child-component :name="name" #name-updated="name = $event" />
Or my favorite way is to use .sync modifier.So the parent component should be:
<child-component :name.sync="name" />
and the method on the child component:
change_name(new_name) {
this.$emit('update:name', new_name)
}
If the components do not have parent-child relation take a look to Vue.js Event Bus or Vuex
Use a computed value instead. For example in your UserEdit.vue:
In your template:
<p>User Age: {{ computedUserAge }}</p>
In your script:
methods: {
editAge() {
this.computedUserAge = 30;
}
},
computed: {
computedUserAge: {
get() {
return this.userAge;
},
set(v) {
this.$emit("ageWasEdited", v);
}
}
}

vuejs update parent data from child component

I'm starting to play with vuejs (2.0).
I built a simple page with one component in it.
The page has one Vue instance with data.
On that page I registered and added the component to html.
The component has one input[type=text]. I want that value to reflect on the parent (main Vue instance).
How do I correctly update the component's parent data?
Passing a bound prop from the parent is not good and throws some warnings to the console. They have something in their doc but it is not working.
Two-way binding has been deprecated in Vue 2.0 in favor of using a more event-driven architecture. In general, a child should not mutate its props. Rather, it should $emit events and let the parent respond to those events.
In your specific case, you could use a custom component with v-model. This is a special syntax which allows for something close to two-way binding, but is actually a shorthand for the event-driven architecture described above. You can read about it here -> https://v2.vuejs.org/v2/guide/components.html#Form-Input-Components-using-Custom-Events.
Here's a simple example:
Vue.component('child', {
template: '#child',
//The child has a prop named 'value'. v-model will automatically bind to this prop
props: ['value'],
methods: {
updateValue: function (value) {
this.$emit('input', value);
}
}
});
new Vue({
el: '#app',
data: {
parentValue: 'hello'
}
});
<script src="https://cdnjs.cloudflare.com/ajax/libs/vue/2.5.13/vue.js"></script>
<div id="app">
<p>Parent value: {{parentValue}}</p>
<child v-model="parentValue"></child>
</div>
<template id="child">
<input type="text" v-bind:value="value" v-on:input="updateValue($event.target.value)">
</template>
The docs state that
<custom-input v-bind:value="something" v-on:input="something = arguments[0]"></custom-input>
is equivalent to
<custom-input v-model="something"></custom-input>
That is why the prop on the child needs to be named value, and why the child needs to $emit an event named input.
In child component:
this.$emit('eventname', this.variable)
In parent component:
<component #eventname="updateparent"></component>
methods: {
updateparent(variable) {
this.parentvariable = variable
}
}
From the documentation:
In Vue.js, the parent-child component relationship can be summarized as props down, events up. The parent passes data down to the child via props, and the child sends messages to the parent via events. Let’s see how they work next.
How to pass props
Following is the code to pass props to a child element:
<div>
<input v-model="parentMsg">
<br>
<child v-bind:my-message="parentMsg"></child>
</div>
How to emit event
HTML:
<div id="counter-event-example">
<p>{{ total }}</p>
<button-counter v-on:increment="incrementTotal"></button-counter>
<button-counter v-on:increment="incrementTotal"></button-counter>
</div>
JS:
Vue.component('button-counter', {
template: '<button v-on:click="increment">{{ counter }}</button>',
data: function () {
return {
counter: 0
}
},
methods: {
increment: function () {
this.counter += 1
this.$emit('increment')
}
},
})
new Vue({
el: '#counter-event-example',
data: {
total: 0
},
methods: {
incrementTotal: function () {
this.total += 1
}
}
})
Child Component
Use this.$emit('event_name') to send an event to the parent component.
Parent Component
In order to listen to that event in the parent component, we do v-on:event_name and a method (ex. handleChange) that we want to execute on that event occurs
Done :)
I agree with the event emitting and v-model answers for those above. However, I thought I would post what I found about components with multiple form elements that want to emit back to their parent since this seems one of the first articles returned by google.
I know the question specifies a single input, but this seemed the closest match and might save people some time with similar vue components. Also, no one has mentioned the .sync modifier yet.
As far as I know, the v-model solution is only suited to one input returning to their parent. I took a bit of time looking for it but Vue (2.3.0) documentation does show how to sync multiple props sent into the component back to the parent (via emit of course).
It is appropriately called the .sync modifier.
Here is what the documentation says:
In some cases, we may need “two-way binding” for a prop.
Unfortunately, true two-way binding can create maintenance issues,
because child components can mutate the parent without the source of
that mutation being obvious in both the parent and the child.
That’s why instead, we recommend emitting events in the pattern of
update:myPropName. For example, in a hypothetical component with a
title prop, we could communicate the intent of assigning a new value
with:
this.$emit('update:title', newTitle)
Then the parent can listen to
that event and update a local data property, if it wants to. For
example:
<text-document
v-bind:title="doc.title"
v-on:update:title="doc.title = $event"
></text-document>
For convenience, we offer a shorthand for this pattern with the .sync modifier:
<text-document v-bind:title.sync="doc.title"></text-document>
You can also sync multiple at a time by sending through an object. Check out the documentation here
The way more simple is use this.$emit
Father.vue
<template>
<div>
<h1>{{ message }}</h1>
<child v-on:listenerChild="listenerChild"/>
</div>
</template>
<script>
import Child from "./Child";
export default {
name: "Father",
data() {
return {
message: "Where are you, my Child?"
};
},
components: {
Child
},
methods: {
listenerChild(reply) {
this.message = reply;
}
}
};
</script>
Child.vue
<template>
<div>
<button #click="replyDaddy">Reply Daddy</button>
</div>
</template>
<script>
export default {
name: "Child",
methods: {
replyDaddy() {
this.$emit("listenerChild", "I'm here my Daddy!");
}
}
};
</script>
My full example: https://codesandbox.io/s/update-parent-property-ufj4b
It is also possible to pass props as Object or Array. In this case data will be two-way binded:
(This is noted at the end of topic: https://v2.vuejs.org/v2/guide/components.html#One-Way-Data-Flow )
Vue.component('child', {
template: '#child',
props: {post: Object},
methods: {
updateValue: function () {
this.$emit('changed');
}
}
});
new Vue({
el: '#app',
data: {
post: {msg: 'hello'},
changed: false
},
methods: {
saveChanges() {
this.changed = true;
}
}
});
<script src="https://cdnjs.cloudflare.com/ajax/libs/vue/2.5.13/vue.js"></script>
<div id="app">
<p>Parent value: {{post.msg}}</p>
<p v-if="changed == true">Parent msg: Data been changed - received signal from child!</p>
<child :post="post" v-on:changed="saveChanges"></child>
</div>
<template id="child">
<input type="text" v-model="post.msg" v-on:input="updateValue()">
</template>
In Parent Conponent -->
data : function(){
return {
siteEntered : false,
};
},
In Child Component -->
this.$parent.$data.siteEntered = true;
2021 ANSWER - Vue 2.3+
SHORT ANSWER: Just add .sync modifier in the parent and pass the data as props to the children:
// PARENT:
data () {
return {
formData: {
members: [] //<- we wanna pass this one down to children and add/remove from the child component
}
}
// PARENT TEMPLATE:
<!-- ADD MEMBERS -->
<add-members :members.sync="formData.members" />
Nested child component: AddMembers.vue
export default {
name: 'AddMembers',
props: ['members'],
methods: {
addMember () {
this.members.push(new Member()) // <-- you can play and reactivity will work (in the parent)
},
removeMember (index) {
console.log('remove', index, this.members.length < 1)
this.members.splice(index, 1)
}
}
}
Long story: changes from the child component in reallity are being $emitted and updating formData.members[] of the parent.
source: Mauro Perez at medium
In the child
<input
type="number"
class="form-control"
id="phoneNumber"
placeholder
v-model="contact_number"
v-on:input="(event) => this.$emit('phoneNumber', event.target.value)"
/>
data(){
return {
contact_number : this.contact_number_props
}
},
props : ['contact_number_props']
In parent
<contact-component v-on:phoneNumber="eventPhoneNumber" :contact_number_props="contact_number"></contact-component>
methods : {
eventPhoneNumber (value) {
this.contact_number = value
}
The correct way is to $emit() an event in the child component that the main Vue instance listens for.
// Child.js
Vue.component('child', {
methods: {
notifyParent: function() {
this.$emit('my-event', 42);
}
}
});
// Parent.js
Vue.component('parent', {
template: '<child v-on:my-event="onEvent($event)"></child>',
methods: {
onEvent: function(ev) {
v; // 42
}
}
});
When we want to pass the data to the parent component as well as another nested child component of the current child component, using a data property would be useful as shown in the following example.
Example:
Calling your child component from the parent component like this.
Parent component:
<template>
<TodoItem :todoParent="todo" />
</template>
<script>
export default {
data() {
return {
todo: {
id:1,
task:'todo 1',
completed:false
}
};
}
}
</script>
Child component:
<template>
<div class="todo-item" v-bind:class="{'is-completed':todo.completed}">
<p>
<input type="checkbox" #change="markCompleted" />
{{todo.task}}
<button class="del">x</button>
</p>
</div>
</template>
<script>
export default {
name: "TodoItem",
props: ["todoParent"],
data() {
return {
todo: this.todoParent,
};
},
methods: {
markCompleted() {
this.todo.completed = true
},
},
};
</script>
Even you can pass this property to the nested child component and it won't give this error/warning.
Other use cases when you only need this property sync between parent and child component. It can be achieved using the sync modifier from Vue. v-model can also be useful. Many other examples are available in this question thread.
Example2: using component events.
We can emit the event from the child component as below.
Parent component:
<template>
<TodoItem :todo="todo" #markCompletedParent="markCompleted" />
</template>
<script>
export default {
data() {
return {
todo: {
id:1,
task:'todo 1',
completed:false
}
};
},
methods: {
markCompleted() {
this.todo.completed = true
},
}
}
</script>
Child component:
<template>
<div class="todo-item" v-bind:class="{'is-completed':todo.completed}">
<p>
<input type="checkbox" #change="markCompleted" />
{{todo.task}}
<button class="del">x</button>
</p>
</div>
</template>
<script>
export default {
name: "TodoItem",
props: ["todo"],
methods: {
markCompleted() {
this.$emit('markCompletedParent', true)
},
}
};
</script>
Another way is to pass a reference of your setter from the parent as a prop to the child component, similar to how they do it in React.
Say, you have a method updateValue on the parent to update the value, you could instantiate the child component like so: <child :updateValue="updateValue"></child>. Then on the child you will have a corresponding prop: props: {updateValue: Function}, and in the template call the method when the input changes: <input #input="updateValue($event.target.value)">.
I don't know why, but I just successfully updated parent data with using data as object, :set & computed
Parent.vue
<!-- check inventory status - component -->
<CheckInventory :inventory="inventory"></CheckInventory>
data() {
return {
inventory: {
status: null
},
}
},
Child.vue
<div :set="checkInventory">
props: ['inventory'],
computed: {
checkInventory() {
this.inventory.status = "Out of stock";
return this.inventory.status;
},
}
his example will tell you how to pass input value to parent on submit button.
First define eventBus as new Vue.
//main.js
import Vue from 'vue';
export const eventBus = new Vue();
Pass your input value via Emit.
//Sender Page
import { eventBus } from "../main";
methods: {
//passing data via eventbus
resetSegmentbtn: function(InputValue) {
eventBus.$emit("resetAllSegment", InputValue);
}
}
//Receiver Page
import { eventBus } from "../main";
created() {
eventBus.$on("resetAllSegment", data => {
console.log(data);//fetching data
});
}
I think this will do the trick:
#change="$emit(variable)"
Intro
I was looking for sending data from parent to child (and back) in vue3 (I know the question was about vue2, but there are no references for vue3 on SO at the time).
Below is the working boilerplate result, pure "html + js", no packagers, modules, etc with few caveats I had, explained.
Notes:
Tnserting the child - line
<component-a :foo="bar" #newfooevent="bar = $event"></component-a>`
I bind parent.bar to child.foo using short-hand :foo="bar", same as v-bind:foo="bar". It passes data from parent to child through props.
Caveat: Event listener should be placed in the child component tag only!
That is the #newfooevent="bar = $event" part.
You cannot catch the signal in the <div id="app"> or anywhere else inside the parent.
Still, this is the parent's side of the universe, and here you can access all parent's data and extract the data from the child's signal to deal with it.
You can create app, and define component after it (the app.component("component-a", ...) part.
Caveat: there are no need in forward declaration of components, e.g. functions in C/C++. You can create app which uses the component, and define the component afterwards. I lost a lot of time looking for the way to declare it somehow - no need.
Here you can find a nice example of the v-model usage, and the code I used to sort things out: https://javascript.plainenglish.io/vue-3-custom-events-d2f310fe34c9
The example
<!DOCTYPE html>
<html lang="en">
<head>
<title>App</title>
<meta charset="utf-8" />
<script src="https://unpkg.com/vue#next"></script>
</head>
<body>
<div id="app">
<component-a :foo="bar" #newfooevent="bar = $event"></component-a>
<p>Parent copy of `bar`: {{ bar }}</p>
<button #click="bar=''">Clear</button>
</div>
<script>
const app = Vue.createApp({
data() {
return {
bar: "bar start value"
};
}
});
app.component("component-a", {
props: {
foo: String
},
template: `
<input
type="text"
:value="foo"
#input="$emit('newfooevent', $event.target.value)">
`
});
app.mount("#app");
</script>
</body>
</html>
There is another way of communicating data change from child to parent which uses provide-inject method. Parent component "provides" data or method for the child component, and this data or method is then "injected" into child component - but it can also be used for triggering a method in parent and passing it a parameter.
This approach can be especially useful when having a child component which happens to be embedded in multiple other components. Also, in a large project care must be taken not to lose overview of provide and inject usage.
Example of parent (top level) component App.vue using provide to give access to it's method updateParentValue (if method is provided and not data, provide is in form of a method):
<template>
<h2>App.vue, parentValue is: <em>{{ parentValue }}</em></h2>
<ChildComponent1 />
</template>
<script>
import ChildComponent1 from "./components/ChildComponent1.vue";
export default {
data() {
return {
parentValue: "",
};
},
components: {
ChildComponent1,
},
provide() {
return {
updateParent: this.updateParentValue,
};
},
methods: {
updateParentValue($value) {
this.parentValue = $value;
},
},
};
</script>
In this example component Component4.vue is in the "bottom", that is, App.vue contains Component1, Component1 contains Component2... until Component4 which actually utilizes inject to get access to parent method which is then invoked and a parameter $value is passed (just a random number here):
<template>
<div>
<h2>ChildComponent4.vue</h2>
<button #click="updateParent(Math.random())">
Update parent value in App.vue
</button>
</div>
</template>
<script>
export default {
inject: ["updateParent"],
};
</script>
Entire example is available here.
Vue.js documentation

Categories

Resources