组件.定义&组件

12003

定义组件

创建/view/component/playground/component-create-example01.html

<template id="component-create-example01">
    <div>
        <p>这是一个组件案例</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>

使用组件

<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: "这是来自父页面的标题!"
        },
    })
</script>