slot插槽 基本的 概念 使用

一、v-slot插槽

概念：v-slot 是用来接受父组件传递过来的 内容 的一个双标签，内容可以是html或者模板。

使用：父组件在注册好的子组件标签内写内容，子组件通过v-slot双标签接受，标签放哪接受到的内容就在哪
分类：1、匿名插槽 _____2 、具名插槽____3、作用域插槽

1、匿名插槽

默认的插槽，没有任何标识，没有特意指定传递到哪个插槽时，由默认插槽接收
子组件

//这是准备好的子组件 
<template>
  <div>
    <p>这是匿名插槽</p>   
      <slot>这是默认内容</slot>  ----slot标签用来接受传过来的内容，
      							----如果父组件没有传内容就显示默认的内容
      							----有传递过来的内容就会将默认的内容替换掉
  </div>
</template>

父组件

<template>
  <div>
    <A>这是要传递过去的内容</A>				--第三步：使用子组件
    										--传内容：在子组件标签内部写入内容传到子组件
  </div>
</template>

<script>
import A from './components/test/a.vue'    --第一步：导入子组件

export default {
  components: {
    A										--第二步：注册子组件
  }
}
</script>

渲染结果

2、具名插槽

一个拥有name属性标识的插槽

代码如下（示例）：

子组件

<template>
  <div>

    <p>这是具名插槽</p>

      <slot name="aaa">这是默认内容</slot>		--给slot标签添加了一个name属性，
      		--name属性值相当于给了slot标签一个标识,父组件可以通过这个标识来指定你这个插槽来接收
      											--如果父组件没有传内容就显示默认的内容
      											--有传递过来的内容就会将默认的内容替换掉
  </div>
</template>

父组件

<template>
  <div>
    <A>										--第三步：使用子组件
      传递过去的内容 A		-- 模板外的是不会被传过去的，除非另外有一个匿名插槽接收
      <template slot="aaa">	--需要样板标签来装载要传递内容 再通过slot=''  来传递到一个指定的插槽
      		  // #aaa  语法糖（简写）
      传递过去的内容 B
      </template>
    </A>
  </div>
</template>

<script>
import A from './components/test/a.vue'			 --第一步：导入子组件

export default {
  components: {
    A											--第二步：注册子组件
  }
}
</script>

这是渲染出来的结果

3、作用域插槽

携带数据的插槽
子组件

<template>
  <div>
    <p>这是作用域插槽  顺带具名</p>
    <slot name="aaa" :newArr='arr'>--通过 :自定义属性='要传递的数据' 向父组件传过去数据供他使用
      这是默认内容					
      </slot>
  </div>

</template>

<script>
export default {
  data () {
    return {
      arr: ['李四', '张三', '王五']				--子组件中的数据
    }
  }
}
</script>

<style>

</style>

父组件

<template>
  <div>
    <A>
      传递过去的内容 A
      <template  v-slot:aaa='obj'>	--因为这里还有具名，不能同时使用2个slot指令，所有要合并
      			//v-slot:name属性值='接收子组件传过来数据的对象'	
      			--通过v-slot命令 v-slot='自定义对象' ,接收的数据就在这个对象里面，对象语法使用
        传递过去的内容 B  {{obj.newArr[0]}}
      </template>
    </A>
  </div>
</template>

<script>
import A from './components/test/a.vue'

export default {
  components: {
    A
  }
}
</script>

<style>
</style>

这是渲染的结果