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',
});

Example

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:

READ : Laravel 6 custom validation Date Format Examples

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.

Example