SOURCE

console 命令行工具 X clear

                    
>
console
<div id="app">
    <parent :title='title' :button='button'></parent>
</div>

<template id="child1">
    <h2>{{title}}</h2>
</template>

<template id="child2">
    <button>{{button}}</button>
</template>

<template id="parent">
    <div>
        <child1 v-bind:title='title'></child1>
        <child2 v-bind:button='button'></child2>
    </div>
</template>

<script>
    const child1 = {
        template: '#child1',
        props: ['title']
    }
    const child2 = {
        template: '#child2',
        props: ['button']
    }
    
    Vue.component('parent', {
        components: {
            child1,
            child2
        },
        template: '#parent',
        props: ['title', 'button']
    })

    new Vue({
        el: '#app',
        data: {
            title: 'This is A parent Component',
            button: 'click to register'
        }
    })
</script>

本项目引用的自定义外部资源