vue之插槽

什么是插槽：

插槽就相当于占位置，帮指定的和插槽的name设置的一样的v-slot的元素占一个位置，可以放自己想放入的东西

在Vue实例中定义局部的组件，然后slot使用标签来定义一个插槽

 <slot name = b></slot>中的name相当于是这个slot的身份证在html的代码中也是通过这个name名来找到他的对应的插槽

new Vue({
        el: "#app",
        data: {
            msg: "hello"
        },
        components: {
            mybutton: {
                props: ['type', 'content'],
                // slot如若没有name的值，就会直接有一个默认的值为default
                // slot如若没有在html中传过来数据，就会使用自己自身内部自定义的默认值
                template: `<button class="my-button" :class="type">
             
						<slot>
					
						</slot>
						<hr>
						 // slot如若没有在html中传过来数据，就会使用自己自身内部自定义的默认值
						<slot name = b>
							这里是默认值
						</slot>
						<slot name="left"></slot>
					</button>`
            }
        }
    })

<mybutton type="success" content="error">
        
            ------------------------
            <template v-slot:left>
            这里的v-slot用来寻找Vue实例中定义的插槽
              <h1>esafaer</h1>
            </template>

            <template #default>
           <!-- 如果Vue实例中定义的插槽是没有设置name的，程序会直接给他赋一个默认的name，赋值为default<slot></slot> -->
              123
            </template>
        </mybutton>