Call a Vue.js component method from outside the component
In this post we will give you information about Call a Vue.js component method from outside the component. Hear we will give you detail about Call a Vue.js component method from outside the componentAnd how to use it also give you demo for it if it is necessary.
we are going to learn about how to call a Vue.js component method from outside the component.
First create a child component.
<script>Vue.component('my-counter',{ template: ' <div> <p>count value: {{ count }}</p> </div> ', data: function() { return { count: 0, }; }, methods: { increment() { this.count++; } }})var vm = new Vue({ el: '#app',})</script>Now in your html add this code.
<div id="app"> <my-counter ref="c"></my-counter> <button @click="$refs.c.increment()">Increment</button></div>
In the above code, we have added ref attribute to the my-counter component.
Inside the button element we can access the component by using $refs property and call the component method.
Full working example
<!DOCTYPE html><html><head> <title>Vue.js</title> <script src="https://cdnjs.cloudflare.com/ajax/libs/vue/2.5.17/vue.js"> </script></head><body><div id="app"> <my-counter ref="c"></my-counter> <button @click="$refs.c.increment()">Increment</button></div><script>Vue.component('my-counter', { template: ' <div> <p>count value: {{ count }}</p> </div> ', data: function () { return { count: 0, }; }, methods: { increment() { this.count++; } }})var vm = new Vue({ el: '#app',})</script></body></html>Hope this code and post will helped you for implement Call a Vue.js component method from outside the component. if you need any help or any feedback give it in comment section or you have good idea about this post you can give it comment section. Your comment will help us for help you more and improve us. we will give you this type of more interesting post in featured also so, For more interesting post and code Keep reading our blogs