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
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', });
index.html
<table> <thead> <tr> <th>Name</th> <th>URL</th> </tr> </thead> <tbody> <tr></tr> </tbody> </table> <tr> <td></td> <td>{{ product.name }}</td> <td>{{ product.url }}</td> </tr>
VueJS nested components Example
E-junkie: Sell digital downloads online
E-junkie Provides a Copy-paste buy-now, and cart buttons for selling downloads, codes and tangible products on any website, blog, social media, email and messenger!
Also see:
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:
var buslevel = new Vue()
// in my-component A's method buslevel.$emit('id-selected', 1)
// in my-component B's created hook buslevel.$on('id-selected', function (id) { // ...some code })
In more complex vuejs component cases, we should consider only employing a dedicated simple case used to state-management pattern.