vue 插槽

1 简单使用: 内置组件 代码写在内部。
理解：组件内部定义插槽，自定义组件标签内容的内容会在插槽的位置显示。
分发： 组件标签内的内容会被组件 slot分发出来。
2.作用域插槽( 组件的内容只能暴露在这个组件内部 ) 组件内容值暴露出来，在页面上对应内容上使用。 组件内的值暴露到外部使用
1 只能是外部传参，父组件传递的变量
vue根节点中:

							data: {
								 username: [1,2,3,4],
								 info:['a', 'b', 'c']
							}

2 组件内部不用做任何板顶， 组件标签中直接使用。
1 组件表中

 <jiandan :username="username" :info="info">{{username[0]}} {{info}}</jiandan>

2 组件内部直接接受，不做任何绑定

						   Vue.component('jiandan', {
								props: ['username', 'info'],
								template: '<div>简单 {{username}}---直接显示<slot></slot></div>'
						   })

3 组件内容内直接显示出来。

<jiandan :username="username" :info="info">{{username[0]}} {{info}}</jiandan>
							{{usename[0]}} 直接取到值
                           	{{info}}     直接取到值		

旧版本：slot-scope： 捕获 Hello组件接受传参(props).
			Vue.component('Hello',{
				template: `<div><slot name="default" :msg="msg"></slot></div>`,
				data () {
				  return {
					msg: 'hello'
				  }
				}
			})
		    //html代码
		    <Hello>
				<template slot="default"  slot-scope="props">
				  <p>{{ props.msg }}</p>
				</template>
			</Hello>
			新版本: 
			Vue.component('Hello',{
				template: `<div><slot name="default" :msg="msg"></slot></div>`,
				data () {
				  return {
					msg: 'hello'
				  }
				}
			})
			html调用
			<Hello>
				<template v-slot:default = "props">
				  {{ props.msg }}
				</template>
			</Hello>

这里的 slot-scope 声明了被接收的 slot 动态绑定:msg="msg"的值， props 变量存在于 <template> 作用域中。 你给这个组件外部传入的参数。 会默认传递给slot-scope， slot-scope 赋值给一个变量。通过这个变量去调用。