[Day 27] 组件基础(2)

今天也要来讲解组件的基础，基础打好未来学习新的东西才不会搞得东倒西歪，虽然今天已经27天了o(^▽^)o，但即使30天结束还是必须继续学习，大家一起go go!!

组件结构限制

不管是new Vue还是组件，因为render函数的限制，跟元素只能有一个，因此当需要在组件中使用到两个元素以上时，就要将他们包裹起来，变成一个。
看个例子更清楚，下面是用昨天的例子改的

和昨天的例子相比多了一个<p>标签，并利用<div>标签包装两个标签，让DOM元素变成只有一个， <p>、<button>标签就可以同时出现了

组件内容

如果想要自行更改组件的内容就可以在template里用上<slot>来达成我们的目的
在<button>新增了<slot>标签
像下面这样

然後设定<button-click>的内容，我们就改变<slot>的值

输出的结果长这样

成功改成 「嘿嘿」了!

小补充

一个小补充，里面的东西是预设值，如果<button-click>没有东西，就会输出<slot>预设的内容，这边预设的内容是 「点我{{count}}次 好害羞(❁´◡`❁)」