组件components
组件的组织:通常一个应用会以一棵嵌套的组件树的形式来组织:
定义组件
<script>
const step = {
template:`<div><button @click="n--">-</button>{
{n}}<button @click="n++">+</button></div>`,
data(){return {n:1}}
}
</script>
注册组件
const app = Vue.createApp({
components:{step}
})
使用组件
<body>
<step></step>
<step></step>
</body>
结果
props传递参数
传递
<step :num="10"></step>
<step :num="5"></step>
接收
props:{
"num":{type:Number,default:1}
},
使用
data(){return {n:this.num}}
完整代码:
<body>
<div id="app&#