vue new component

//-------------------- This is your main vue file <template> <h1>Your File Name Title</h1> <p>Random text</p> // now import your component here --- see below comments to find the component code <ComponentName /> </template> <script> import ComponentName from '/componentlocation' export default{ name: 'MainFile', components: { ComponentName }} </script> //------------ This is the component code in a different file <template> <h1>This is the component</h1> </template> <script> export default{ name: 'ComponentName' } </script>

how to access both child event param and parent param in vue

<template>
    <ul>
        <product v-for="product in products"
                 :product="product"
                 @add="addToChart" />
    </ul>
</template>

<script>
const Product = {
    props: ["product"],
    render(h) {
        return h("li", { on: { click: this.click } }, this.product);
    },
    methods: {
        click() {
            this.$emit("add", { product: this.product, quantity: 42 });
        }
    }
};

export default {
    data() {
        return {
            products: ["Foo", "Bar"]
        };
    },
    components: {
        Product
    },
    methods: {
        addToChart({ product, quantity }) {
            console.log(product, quantity);
        }
    }
}
</script>

Posted by: Guest on April-30-2020

Source

// Define a new component called button-counter Vue.component('button-counter', { data: function () { return { count: 0 } }, template: '<button v-on:click="count++">You clicked me {{ count }} times.</button>' })

Code answers related to "vue new component"

Code answers related to "Html"

Browse Popular Code Answers by Language

Answers for "vue new component"

Code answers related to "vue new component"

Code answers related to "Html"

Browse Popular Code Answers by Language

Popular Programming Languages

Advertisements

Company

Compilers

Help

Connect with us