Component Definition & Component

12003

Defining Components

Create /view/component/playground/component-create-example01.html

<template id="component-create-example01">
    <div>
        <p>This is a component example</p>
        <p>{{ exampleTitle }}</p>
    </div>
</template>

<script type="module">
    Vue.component("component-create-example01", {
        template: '#component-create-example01',
        props: ['exampleTitle'],
        data: () => ({
        }),
        computed: {},
        watch: {},
        async created() { },
        mounted() { },
        methods: {}
    })
</script>

Using Components

<v-app>
    <component-create-example01 :example-title="title"/>
</v-app>
{% include 'component/playground/component-create-example01.html' %}
<script type="module">
    new Vue({
        el: '#app',
        template: '#app-template',
        vuetify: new Vuetify(),
        data:{
            title: "This is the title from the parent page!"
        },
    })
</script>