Vue基础_插槽

Vue基础_插槽

​ 类似于一个占位符，当有匹配的内容时，会将对应内容显示

1.默认插槽

<slot><slot>
	子组件中:
		Vue.component('Child',{
			template:`
				<button>
					<slot></slot>
				</button>
			`
		})
	父组件中:
		Vue.component('Parent',{
            template:`
				<Child>内容<Child>
`
        })
	父组件中使用Child的内容，则是会通过插槽到子组件中

2.具名插槽:

   子组件:<slot name='名字'></slot> 中间可以放默认内容，如果有对应的则会将默认内容覆盖
   父组件:	1.<template slot='名字'></template> // 将template下面的所有插入的子组件slot中
   		  2.直接在<div slot=''></div> // 将当前div中的元素插入到slot中
   无名插槽:<template></template> --> 对应<slot></slot>
       <slot name='名字'><slot>  === <template slot='名字'></template>,将对应的template插入slot所在的位置
   子组件:Vue.component('Child', {
       template: `<slot name='名字'></slot>`
   })
   父组件:Vue.component('Father', {
       template:`<template slot='名字'>内容</template>`
   })
   上述就是将template中的内容插入字组件对应名字的位置
   注意:
   	只要名字对上则会默认插入相同名字的插槽，不论顺序
   	多个template未指名,则会一起放到未指名的插槽的位置
   	如果没有默认插槽，但有未指名的template，那么其中的东西会被丢弃

3.作用域插槽:

	用于父组件要使用子组件的数据
	作用域插槽强调的则是数据作用的范围
    带参数（数据）的插槽，即在子组件的插槽中带入参数（数据）提供给父组件使用
    父组件中通过slot-scope= '设置的名字'用于接收数据
    使用:
	子组件:
		Vue.component('Child',{
            data() {retruen 数据}
            // 将父子组件数据绑定到父组件的接收的名字上,这样，父组件就可以通过此名字使用了
            template: `<slot :slot-scope设置的名字=子组件中的数据><slot>`
        })
	父组件:
		Vue.component('Father',{
            <template slot-scope='设置的名字'></template>// 获取到子组件的值
        })

	作用域插槽数据传递:
		子组件					父组件
        		 绑定(重要)
    data---->slot----->slot-scope--->通过接收的名字使用