I am having two independent VUE components and I want to communicate between them.
In the first component, I am using <component> and added ref to it.
<component ref="dynamicComponent"></component>
and in that above dynamic component, there is a method(suppose dynamicMethod) and I want to call that method from second component.
So for that, I am using below code:
this.$root.$refs.dynamicComponent.dynamicMethod();
But I am getting this.$root.$refs a blank object. How can I call that method.
Any help would be appreciated.
Make sure you're trying to access $refs only after the component is mounted.
You should be able to access the $refs in the mounted hook.
mounted: function() {
console.log(this.$refs);
},
Related
Overall goal: from a child Vue component, get access to the component that it is imported and used within - which is not always the same as $parent. This should be done by only making changes within the child component (if possible).
We have PinButton Vue component meant to add a "pinning" functionality to other components. This component is used within many other components and we want to be able to access the parent props so they can be saved and rendered on a different page of "pinned content" by passing those props back into the parent component.
Note: I know this would be possible by manually passing the parent props down into the component (<pin-button :parent-props="$props" />), but we're trying to avoid having to do this every time the component is used.
A minimal reproduction of this with a single parent and child component will show that you can access parent props using $parent.$props. However, when the child component is nested as slot content of some other component within the parent, then the child will get the props of the wrapper component - not the component in which it is imported and actually used.
Sandbox reproduction - I want to get the props for ParentComponent from within ChildComponent. The expected value is shown by passing the props along (what I'm trying to avoid) and the actual value is the props of the SlotWrapper component, which doesn't import ChildComponent so I wouldn't consider it the true parent, but it is the direct parent element in the <template>
Update:
Seems like the suggested solution for "arbitrarily deep" access is provide/inject, but this would still seem to require changing all components that use the <pin-button />
To answer your question directly, you can access ParentComponent from ChildComponent via the "context" the component is rendered within:
// ChildComponent.vue
computed: {
expectedProps() {
return this.$vnode.context.$props
}
}
But this might be an "XY" kind of problem; I'm sure there's a better design solution for what you're trying to achieve.
Parent component: ShowComment
Child component: EditComment
I'm trying to pass the value of this.CommentRecID to the child component.
I wrote this in the template of ShowComment:
<EditComment CommentRecID="this.CommentRecID" v-if="showEdit"></EditComment>
and
this.showEdit = true;
but the value of this.CommentRecID is shown as undefined in the child component:
I thought that writing props: ["CommentRecID"], in the child component would have already been enough to pass the data, but it wasn't (because it's related to jQuery I think).
What is wrong with the way I try to pass the values?
Here's the parent component.
Here's the child component.
You shouldn't need to use this in VueJS directives. Also, instead of using a static attribute, you need to use v-bind:
<EditComment v-bind:comment-rec-id="commentRecId" v-if="showEdit"></EditComment>
Also, there's an issue with the casing: for VueJS, in template props should be kebab-cased, while in the component JS logic you should use camelCase props. Remember to update your child component's prop declaration so that it can read the new prop correctly:
props: ["commentRecId"]
You need to use VueJS binding
<EditComment :comment-rec-id="CommentRecID" v-if="showEdit"></EditComment>
props: ['commentRecId']
I recently updated laravel mix in my project to the latest and immediately I was swarmed by Vue errors. I seem to struggle with this one especially. I have a component:
<template>
<div>
<ChildComponent :context="this"></ChildComponent>
</div>
</template>
<script>
import ChildComponent from './child-component';
export default {
components: { ChildComponent },
...
}
</script>
This is the error I get: Error in render: "TypeError: Cannot read property 'context' of undefined".
Seems weird because in vue-devtools the parent component is present as an object in context prop of ChildComponent.
I should probably also add that context is defined as context: {} in ChildComponent's props.
this is not defined in the <template> and attempting to pass the entire Vue instance to the child seems like an anti-pattern. You should explicitly define and pass data and variables to children components, and (optionally) if you want to receive some data back from the child, you should emit events and bind to those events in the parent.
If you must access the parent component from the child, you can use this.$parent in the child component: https://v2.vuejs.org/v2/guide/components-edge-cases.html#Accessing-the-Parent-Component-Instance
But unless you have a good reason to reach for that $parent variable, it should be avoided as it tightly couples your components together.
I have a Component titled 'CollectionsPage' where I am trying to create a reference to a child, and call one of its methods via its onClick function.
The reason for this is because I want the child to handle its own state, rather than pass it all down from the parent component. The child is called 'CollectionsCreateForm' and I currently just have a function in it called 'test'. I tried to call the function but it never runs -- however, when I tried the same function from a different component, it worked. Is there something about AntD's form-within-a-modal that is causing me difficulty?
I have tried changing the reference, and I also passed in 'wrappedComponentRef' to child to ensure that wasn't the issue. I need to be able to access form in the child, but AntD says it needs to be passed in as props from the parent. I would love to put the 'onCreate' method in the child, so the modal handles everything that it should without help from the parent, but I believe it needs a reference to the formRef.
I have made an example of my issue on a sandbox. Here is the link.
When using antd to create a form you basically use the Higher-Order Component - (Form.create(Component)) that wraps your component with the test method inside.
this.testRef.current will refer to your Higher-Order Component basicly Form.create class not your own component.
You can use wrappedComponentRef like so to get reference to your own component:
<CollectionCreateForm
wrappedComponentRef={(inst) => this.formRef = inst}
/>
and then simply call this.formRef.test();
Here is a working example:
https://codesandbox.io/s/n34ppwnq9j
I'm new to VueJS and I'm trying to call a method inside a child component after my parent component changed the child's props.
I have the following in my child component:
methods: {
isChecked() {
if (this.cookiesTags) {
return this.cookiesTags.includes(this.tag.id);
}
return false;
}
},
updated() {
this.isChecked();
}
However, I get an error saying the isChecked() method is not a function, and I really want to avoid repeating the same code in both the methods and updated() hook.
Am I in the wrong way here? If someone could guide me to a better way of doing this it would be great also. I need to have reactivity in the child's props because the parent component is constantly changing this property via ajax, that's why I used the updated() hook here, but maybe there's a better way.
Thanks everyone!