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>