vue7自定义组件，插槽

Posted 2023-03-09

参考技术A components:   

每个组件就是一个小型的vue实例，它里面除了不能设置el选项，其他选项它多有。

使用template选项，定义组件的模板，模板中必须包含一个根标签

vue实例中定义好组件，然后再body中使用命名的组件名称作为标签；

在组件中通过props数组来定义组件的属性。（ props中接收template里面插值表达式里面定义的变量 ，然后在body中使用title="北京" content="奔驰"将数据传输出去，如果是要绑定变量则用 v-for 循环，再使用  :title="item.title" :content="item.content" 来传输数据）

props选项，用于定义组件的属性，有两种方式，1.定义数组  2.定义对象。props是只读的，不能修改。 一般通过中转props传进来的值来改变

$emit( ) ，触发一个自定义事件，事件的名称是synccount，将count的最新值作为事件对象传出去，注意，自定义事件名称不能使用大写

对myCount的变化进行监听，当发生变化时，触发一个自定义事件，事件的名称是synccount，此处的事件不能不能大写，val为传参，然后在b-counter中用@synccount="synccount" 来绑定，此处的index为下标，$event是回发的事件。

Vue,component(' b-box ' ,         )， 其余和局部组件相同。

在template中使用<slot></slot>，然后在DOM中添加想要的内容