Vue Get Components

Posted on  by admin

DOM Template Parsing Caveats

Modified1 month ago. I use Vue.js 2.5.13 and have this structure:. How to get data from ComponentTwo in component ComponentOne? This is important for me, because I've many similar components with fields (huge registration site form) and have no idea about calling data between Vue-components.. 11 gold badge99 silver badges2525 bronze badges. 2525 bronze badges. Vuejs uses "props" for parent/children communication and "emits" events for children/parent communication. You have to remember that for every prop you pass to the child component you should add that prop to the props array.

The same applies to events: every events you emit you should be caught in the parent component, like so:.

Web development, programming languages, Software testing & others

This should work. 5656 bronze badges. You can easily achieve this using a global event bus.

vue.extend( );
var sample_component = Vue.extend({
//component options
} );

For larger, more complex applications I would recommend using a state management tool such as vuex. user320487user320487.

vue.component(tag, constructor):

There are several ways of doing it, and some are mentioned in other answers:(in no particular order, Read the detailed sections below for more info).

vue.component(‘sample_component’, MyComponent);

Use a global eventbus. Use props on components. Use v-model attribute. Use the sync modifier. For two-way bindings keep in mind that it can cause a chain of mutations that are difficult to maintain,quoted from the docs:.

Base Example

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.

Example #1

Here are some details to the methods that are available:.

import Vue from "vue";
import App from "./Hello";
Vue.config.productionTip = false;
new Vue({
el: "#app",
template: "",
components: { App }

Props are easy to use and are the ideal way to solve most common problems.Because of how Vue observes changes all properties need to be available on an object or they will not be reactive.If any properties are added after Vue has finished making them observable 'set' will have to be used.

The object will be reactive for both component and the parent:.

I you pass an object/array as a prop, it's two-way syncing automatically - change data in the child, it is changed in the parent.

Example #2

If you pass simple values (strings, numbers) via props, you have to explicitly use the .sync modifier.

As quoted from -->

3.) Use v-model attribute.

Vue.component('counter', {
data: function () {
return {
count: 0
template: ''
new Vue({ el: '#counter-demo' })

The v-model attribute is syntactic sugar that enables easy two-way binding between parent and child.

It does the same thing as the sync modifier does only it uses a specific prop and a specific event for the binding.

body {
background: #20262E;
padding: 18px;
font-family: Helvetica;
#counter-demo {
background: #fff;
border-radius: 5px;
padding: 18px;
transition: all 0.2s;

is the same as this:.

Where the prop must be value and the event must be input.

Example #3

4.) Use the sync modifier.

The sync modifier is also syntactic sugar and does the same as v-model, just that the prop and event names are set by whatever is being used.

In the parent it can be used as follows:.

Vue.component('employee_name', {
props: ['name'],
template: '

Hello Mr/Ms {{ name }}

new Vue({
el: "#app"

From the child an event can be emitted to notify the parent of any changes:.

Vuex is a data store that is accessible from every component.Changes can be subscribed to.

body {
background: #20262E;
padding: 18px;
font-family: Helvetica;
#app {
background: #fff;
border-radius: 5px;
padding: 18px;
transition: all 0.2s;

By using the Vuex store it is easier to see the flow of data mutations and they are explicitly defined.

Example #4

By using the vue developer tools it is easy to debug and rollback changes that were made.

This approach needs a bit more boilerplate, but if used throughout a project it becomes a much cleaner way to define how changes are made and from where.

Grid Component in Vue.js



See the getting started guide.

body {
font-family: Arial, sans-serif;
font-size: 13px;
color: rgb(44, 43, 43);
table {
border: 1px dotted #4beea5;
border-radius: 2px;
background-color: rgb(228, 212, 212);
th {
background-color: #81b855;
color: rgba(37, 25, 25, 0.66);
cursor: pointer;
-webkit-user-select: none;
-moz-user-select: none;
-ms-user-select: none;
user-select: none;
td {
background-color: #d8a1a1;
td {
min-width: 130px;
padding: 12px 22px;
} {
color: rgb(243, 235, 235);
} .arrow {
opacity: 2;
.arrow {
display: inline-block;
vertical-align: middle;
width: 1;
height: 1;
margin-left: 4px;
opacity: 0.68;
.arrow.asc {
border-left: 3px solid transparent;
border-right: 3px solid transparent;
border-bottom: 3px solid rgb(221, 214, 214);
.arrow.dsc {
border-left: 3px solid transparent;
border-right: 3px solid transparent;
border-top: 3px solid rgb(255, 240, 240);

You need to implement a system that send the v-model back to the parent.

This can be done by using a computed property inside component-two that emits the change inside its set method.

66 gold badges5757 silver badges7474 bronze badges. 7474 bronze badges.

  • 11 gold badge88 silver badges1818 bronze badges Not the answer you're looking for? Browse other questions tagged vue.jsvuejs2vue-component or ask your own question.
  • 1818 bronze badges. Modified1 year, 8 months ago. I have simple component structure for my single page website:.
  • And now I want to list all web page blocks (article sections) in menu component.
  • Ofcourse I can write this list manually but I wonder if possible to parse all my components for some key and as a result make list from them.

Not the answer you're looking for? Browse other questions tagged javascriptvue.jsvue-component or ask your own question.

So that my menu list will be based on components and will be updated automatically if I add some new article component or remove one. Warranty.vue component:. Then other article components in the same way.. And now my Menu.vue component:. Or should I just move all articles in separate folder?

Recommended Articles

Is this possible to make vith Vue? 66 gold badges2929 silver badges5757 bronze badges. 5757 bronze badges. If you have all this values in this.articles you could do:.