Vue 笔记12.02 自定义组件和插槽

 一、自定义组件：

自定义组件有两种形式，一种是全局的自定义组件，另一种是写在Vue里面的受挂载容器限制使用的。

1.全局自定义组件：Vue.component(id, [definition])

组件中也包含生命周期，几乎Vue中有的组件里也都有。但是注意，在组件中定义的这些属性、数据、方法等只会在组件里生效。

并且组件中的data是一个方法，不同于在Vue中的data是一个对象。在组建中data返回一个对象。在返回的对象中定义数据。

2.Vue的自定义组件：components:{id:{}}

自定义组件中的props选项，用于定义组件的属性，有两种方式，上图是定义数组，下图是定义对象。

还有需要注意的是，props中定义的属性都是 只读 的，不能修改。如果有需要，我们一般会在组件的data中设置一个数据当做中转对象，这个对象的值时可以修改的。

我们设置好中转对象了以后，用它来替代原本props里设置的属性。（ 也就是用myCount 替代了 count  ）这样显示出来的数据就可以被修改了。

3。学到了一个方法：通过在组件中触发一个事件，然后用定义的方法来修改Vue中data里的数据：

这里是写在组件中的，用监听器监听myCount的动态。一旦数值发生变化就触发一个自定义事件。

this.$emit('事件名称'，事件对象 )

然后再Vue中写一个方法，这个方法传入下标和当前事件对象。

通过下标找到对应的count，把count的值重新定义为 e 也就是当前事件对象。

@synccount='synccount(index,$event)'

@synccount='synccount(index,$event)'  给自定义事件synccount 绑定了 synccount 方法（名字可以随便取，这里同名了）。并且传入index和当前事件对象。这个$event 传进synccount方法中就是e（e写在html里面就是 $event）。

结合上面3张图片来看，这个事件对象e就是自定义事件synccount中传出的那个‘val’。触发这个自定义事件的时候，这个‘val’就作为事件对象传出去给了事件绑定的这个叫synccount的方法。成为了这个方法的事件对象。

这个‘val’就是myCount的最新值。

要是还看不懂的话就去看代码吧。

二、组件中的插槽：

想在组件标签中间加东西 并且希望加入的东西在组件中显示 就需要用到插槽

组件标签中写的任何内容都会在插槽里显示 插槽在哪里 内容就在哪显示

这里把插槽 写在了最上面

效果图：