<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<title>Title</title>
</head>
<body>
<div id="app">
<h1>{{msg}}</h1>
<box2 :total="appCount"></box2>
</div>
<template id="button_counter">
<button @click="count++">点{{count}}次</button>
</template>
<template id="div_box2">
<p>total:{{total}}</p>
<button @click="total++">btn1</button>
<p>myTotal:{{myTotal}}</p>
<button @click="myTotal++">btn2</button>
<div style="background-color: red">div_box2<button-counter></button-counter></div>
</template>
<script src="js/vue.3.2.2.js"></script>
<script>
//注册一个局部组件
const Counter={
data(){
return{
count: 0
}
},
template:'#button_counter'
}
const Box={
props:{
total:Number
},
data(){
return{
myTotal:this.total
}
},
components: {
'button-counter':Counter
},
template:'#div_box2'
}
// 1、创建Vue的实例对象
const app = Vue.createApp({
data(){//定义数据
return {
msg:'你好！',
appCount:100
}
},
components:{
// 'button-counter':Counter,
'box2':Box
}
}).mount('#app');
</script>
</body>
</html>
