最初のコードに関する注意：1。<template>は、<script>ではなく本文に記述する必要があります。
2.コンポーネント内の1つのziのみ：{}はES6のシンタックスシュガーであり、これはzi：ziと同等です。
<body>
<template id="zi">
<div>
<h1>hello</h1>
</div>
</template>
</body>
<!--使用Vue.extend声明组件-->
<script>
const zi=Vue.extend({
template: '#zi',
})
const app=new Vue({
el: '#app',
components: {
zi
}
})
</script>と
<body>
<template id="zi">
<div>
<h1>hello</h1>
</div>
</template>
</body>
<script>
const app=new Vue({
el: '#app',
components: {
zi:{
template: '#zi',
}}})
</script>と
（テンプレートを省略し、「」を使用して引用しますが、この書き方は面倒ではっきりと見えにくいため、お勧めしません）
<script>
const app=new Vue({
el: '#app',
data:{
num1: 1,
num2: 2
},
components: {
zi:{
<!--下面这行--!>
template: `
<div>
<h1>hello</h1>
</div>
`
}}})
</script>
すべてのサブコンポーネントはVueにローカルで登録でき、3つの効果は同じです