VueJS Nested Components vue inside Components Example

VueJS Nested Components vue inside Components Example

Vuejs nested components with inline-template

In this post we will show you Best way to implement VueJS Nested Components vue inside Components Example with Vue.js , hear for I have 2 components defined in VueJS. Parent and Child with Download .we will give you demo,Source Code and examples for implement Step By Step Good Luck!.

Main.js

[php]
var myComponent = Vue.extend({
template: ‘#my-component’,

data: function() {
return {
products: []
}
},

created: function() {
this.$http
.get(‘/products.php’)
.then(function(products) {
this.products = products.data;
}
);
}
});

var realnewcomponet = Vue.extend({
template: ‘#my-component-child’,

props: [‘product’],

data: function() {
return {
product: {}
}
}
});

Vue.component(‘my-component’, myComponent);
Vue.component(‘my-component-child’, realnewcomponet);

new Vue({
el: ‘body’,
});
[/php]

Example

index.html

[php]

Name	URL

{{ product.name }} {{ product.url }}

[/php]

VueJS nested components Example

Sometimes two or more components may need to html and js scripts communicate with one-another view side but they are not used first and next parent/child to each other. In simple example two or more scenarios, we can use an empty simple Vue instance var as a central level event bus:

[php]
var buslevel = new Vue()
[/php]

[php]
// in my-component A’s method
buslevel.$emit(‘id-selected’, 1)
[/php]
[php]
// in my-component B’s created hook
buslevel.$on(‘id-selected’, function (id) {
// …some code
})
[/php]

In more complex vuejs component cases, we should consider only employing a dedicated simple case used to state-management pattern.

Example