前文
这节课我们学习一下组件，组件是什么东西呢
我们在写代码的时候，如果界面较为复杂
我们会在一个页面写了接近十万乃至上百万的情况(不写油猴的时候)
那我们有没有什么办法解决这个问题？
就是组件
组件可以将不同功能不同逻辑的代码拆分
反复在不同位置上进行复用。
我们先来看一下代码
例子
let text=`<div id="app" style="position: absolute;top: 50vh;left: 50vw;background: #fb7d7d;padding:10px;">
<testcom></testcom>
<testcom></testcom>
</div>`
var el=document.createElement('div')
el.innerHTML=text;
document.body.append(el)
const Counter = {
data() {
return {
}
},
methods:{
}
}
const app = Vue.createApp(Counter);
app.component('testcom', {
template: `<span>testcom</span>`
})
app.mount("#app");
使用方法也很简单
const app = Vue.createApp(Counter);
app.component('testcom', {
template: `<span>testcom</span>`
})
我们在Vue.createApp创建了一个app对象
然后使用app.component创建一个组件
第一个参数为组件名，第二个参数是一个对象，有一个template属性，template填写我们的模板
然后在我们的页面上像使用HTML标签一样使用组件。
注意一个问题，这里的组件通常不建议使用封闭式，如<标签名 />
经过测试，我们可以看到，这里显示了两次
传入数据
app.component('testcom', {
props: ['spanname'],
template: `<span>{{spanname}}</span>`
})
在第二个对象中我们可以创建一个props属性，内是一个数组，我们可以设置传入的属性名。
我们这里写了spanname
然后在模板像存在data数据一样，使用了{{}}显示了数据，在method中我们可以直接使用this.spanname
但是注意，这里不能修改数据，如果修改数据以后我们再说。
这里的组件我们也可以循环绘制，让我们用v-for试一下。
我们声明了一个data的numlist为10
然后开始循环
let text=`<div id="app" style="position: absolute;top: 50vh;left: 50vw;background: #fb7d7d;padding:10px;">
<testcom
v-for='(item,index) in numlist'
:key='index'
:spanname='"---"+index+"---"'>
</testcom>
</div>`
首先v-for进行循环，获取了item，获取了循环的数字，以及index
然后设置了key为index，我们这里不会排序，所以可以尽管放心。
spanname因为我们绑定了响应的数据，所以这里需要将spanname设置为:spanname，同时将内容设置为一个计算的，即'"---"+item+"---"'
将两个字符串与item拼接，最后显示，我们可以看一下效果
置顶卡
沉默卡
照妖镜
