I have 4 components in vue, I want to call a grandchild function('refreshArtifact') from a child component, any idea how can I do it?
So here is my component hierarchy:
Parent : TeamManagment.vue
Children :TeamPlatform.vue & ManagementArtifcts.vue
GrandChild : TeamAction.vue (TeamPlatform.vue child)
i want to call the 'refreshArtifact' function in TeamAction.vue from the ManagmentArtifact.vue component.
In my opinion, you can't right now directly call a child function of a brother. So, with your code, you can't directly call a function of a component A, from a component B which is the brother of the A one.
But, you can do that with the grandparent component.
So, when the ManagmentArtifact.vue component need to call refreshArtifact function, you can emit an event. The TeamManagment.vue listen that event, and then pass use ref of TeamPlatform.vue component to call the function.
ManagmentArtifact.vue: this.$emit('callRefresh')
TeamManagment.vue: <ManagmentArtifact #callRefresh='refreshArtifact' />
<TeamPlatform ref='team' />
methods: { refreshArtifact(){ this.$ref.team.refreshArtifact() } }
You can read the doc here.
Related
hello everyone i jusy wanna know how to call a perent function from a child component
i've tried to use the $parent to call the perent method but i have this error typeError: _this.$parent.forceRender is not a function
here's the parent method that i'm trying to call
methods: {
forceRender() {
this.componentKey += 1
}
},
and here's the child component as you can see i'm trying to call the parent method using the $parent
this.$parent.forceRender()
You can send the functions as a props to the child component jus like follows
<child-component :forceRender="forceRender" />
inside the child component you can received it like this
props: ['forceRender']
and then call it as
this.forceRender()
You should emit an event from child to parent component in order to run a parent method :
in child component:
this.$emit('force-render')
in parent component add #force-render to component tag with forceRender as handler :
<child-component #force-render="forceRender" />
Hy there,
I try to create a custom Vue component which is shown based on v-if directive. I also want to change the directive data (modalStatus) value from inside the component.
<modal v-if="modalStatus"></modal>
To update the data from the component i use a method similar to this.
closeModal () {
this.$parent.modalStatus = false
}
The problem is that sometimes i don't know the name of the data model (modalStatus) , can be anything.
My question is how can i get the data/expression name as a plain text from the modal component ?
I'm planing to use something like this to update the modalStatus
this.$parent['anyName'] = false
Thanks and stay safe !
Later Edit. I know how to accomplish all of the above using props or v-model. I wonder if is possible using strictly v-if. Thanks!
There are several approaches to get to a method or property in the parent component from the child.
The 'Vue Way' is to emit a message telling the parent to close.
Send the name in as a property
Parent
<child modalName='modalStatus' />
Child
this.$parent[this.modalName]=false
Send in a method
Parent
<child :close='onClose' />
// component method
onClose(){
this.modalStatus=false
}
Child
this.close()
Emit a message
Parent
<child-component #close='modalStatus=false' />
// or call a method
<child-component #close='onClose' />
// component method
onClose(){
this.modalStatus=false
}
Child
this.$emit('close')
I need that when a user clicks a button on the child component the parent component receives cart.lenght to be assigned the count property of an element.
Child component code
<q-btn flat round color="faded" icon="fas fa-shopping-cart" #click="cart(item.id)"/>
cart: function (Id) {
let cart = []
cart.push(Id)
this.$emit('totalItensCart')
this.$q.localStorage.set('cart', cart)
}
How do I display the cart.length value in the count property that is in the parent component?
Parent component code
<q-route-tab
count="5"
icon="fas fa-cart-plus"
to="/cart"
exact
slot="title"/>
As per the vue event documentation, we want to emit an event from the child component to the parent component. You are correct with the this.$emit method, but it can take two parameters in order to pass data, like so:
this.$emit("name", data);
So, let's emit a count of the number of items in the cart from the first child:
this.$emit("cartUpdate", cart.length);
Now we need to handle this in the parent. We'll first need a data property to keep track of the totalCartItems in the parent:
data: function () {
return {
totalCartItems: null
}
}
Assuming that both of your code snippets are in different children of the same parent, and that the first child (the one that emits cartUpdate) has the component name first-child:
<first-child #cartUpdate="cartUpdate"></first-child>
This will call the cartUpdate() method in the parent component whenever the child emits an event called cartUpdate (using the # shorthand for v-on). The method is very simple, only updating the totalCartItems data property in the parent:
cartUpdate: function (totalCartItems) {
this.totalCartItems = totalCartItems;
}
Finally, let's ensure this gets updated in the second child component by binding it to the data value:
<q-route-tab
:count="totalCartItems"
icon="fas fa-cart-plus"
to="/cart"
exact
slot="title"/>
I have split up the components only for the reason the base or the parent component code is growing in size and for code organization. so split the components based on the sections of the parent component.
So the each child component are the each section of the same parent component. But my question how to access the child component objects from parent component? Because most of the examples i see are based on the click event from parent component to view the child component (like dialog) and the value is passed back to the parent html click event and captures the values using emitter and output parameter.
Whereas in my case there is no such click action to trigger the child component. So how to communicate the values from child component to parent component?
In parent component
onDocumentSelect( documentData: IDocument) {
console.log(documentData);
}
<app-document [showDocument] = 'displayDocument' (selectDocument)=onDocumentSelect($event)></app-document>
In Child component:
#Output() selectDocument: EventEmitter<e.IDocument>;
#Input() showDocument: boolean;
I am triggering emit in the function where the data for the DocumentSource is computed.
this.selectDocument.emit(this.DocumentSource.data);
here this.DocumentSource is the dataTable which has value in Child component, that needs to be accessed in parent component.
Apart from this I have similar data for another field of different type needs to be passed to parent component from child component.
I get the below error while page loads
TypeError: Cannot read property 'subscribe' of undefined
In the above code snippet, by changing the type to any solved the issue.
On child component:
#Output() public selectDocument: EventEmitter<any> = new EventEmitter<any>();
On parent component:
onDocumentSelect( documentData: any) {
console.log(documentData);
}
I am working on a chat tool using vue single file components.I am facing a problem,root .vue has child .vue and grandchild .vue, I want to observer children's rendering,to get the root div's height,to change scrollbar position,
i used the $nextTick() http://rc.vuejs.org/api/#vm-nextTick,but it cant observer children's render,so ,is there any way can I try? thanks a lot.
You can use parent child communication of vue to get to know when you child has rendered. Vue provided following event interface:
Listen to an event using $on(eventName)
Trigger an event using
$emit(eventName)
A parent component can listen to the events emitted from a child component using v-on directly in the template where the child component is used.
So you can emit a event in your child component's lifecycle hook like following:
mounted () {
this.$emit('childRendered')
}
In parent component, you can listen to this event or create a method, like following:
this.$on('childRendered', function () {
// change scrollbar position
})
An example of parent child communication: fiddle
This is just for everyone to easily see the workaround that was mentioned by Saurabh in his comment to his answer. I also used the updated lifecycle to wait for the DOM to finish rendering and patching before manipulating it again.
Since updated does not guarantee that all child components have also been re-rendered, use vm.$nextTick inside of updated.
updated: function () {
this.$nextTick(function () {
// Code that will run only after the
// entire view has been re-rendered
})
}