Vue 新版插槽的使用

插槽就是子组件中的提供给父组件使用的一个占位符，用 表示，父组件可以在这个占位符中填充任何模板代码，如 HTML、组件等，填充的内容会替换子组件的标签。

最简单的插槽使用方法：

//a模块
<template>
  <div>
      <b-module>
      <div>好热啊！！！</div>
      </b-module>
  </div>
</template>

<script>
  import bModule from './b';
  export default {
    name: "A",
    components: {
      bModule
    }
  }
</script>

//b模块
<template>
  <div>
 	 <h1>今天热吗：</h1>
      <slot></slot> //如果放置多个slot也只会渲染出一样的内容
  </div>

</template>

如果b模板里没有放置<slot></slot>
a模板里的<div>好热啊！！！</div>不会被渲染出来哦

具名插槽

即使打乱template模板的顺序也不会影响渲染的顺序
只要slot里的name值对上了就不会渲染错。

//a模板
<template>
  <div>
      <b-module>
      <template v-slot:footer>尾部</template> <br>
      //v-slot:可以缩写成#
      <template #header>头部</template> <br>
      <template>我是默认插槽的值</template>
      </b-module>
  </div>
</template>
<script>
  import bModule from './b';
  export default {
    name: "A",
    components: {
      bModule
    }
  }
</script>

//b模板
<template>
  <div>
    <slot name="header"></slot>
    <slot></slot> //默认插槽
    <slot name="footer"></slot>
  </div>
</template>

作用域插槽

绑定在 元素上的 attribute 被称为插槽 prop。现在在父级作用域中，我们可以使用带值的 v-slot 来定义我们提供的插槽 prop 的名字：

<template>
  <div>
      <b-module>	//v-slot="props"
          <template v-slot:default="props">
            {{user.user.firstName + user.user.lastName}}
          </template>
      </b-module>
  </div>
</template>
<script>
  import bModule from './b';
  export default {
    name: "A",
    components: {
      bModule
    }
  }
</script>

<template>
  <div>
    <slot :user="user"></slot>
  </div>
</template>
<script>
  export default {
    name: "B",
    data() {
      return {
        user: {
          firstName: '龍',
          lastName:'鸣'
        }
      }
    },
  }

</script>

带name的写法

<template>
  <div>
      <b-module>
          <template v-slot:usr="prop">
            {{prop.user.name}}
          </template>
          		//此写法为缩写
          <template #gs="props">
            {{props.goods.total}}
            {{props.goods.shirt}}
            {{props.goods.dress}}
          </template>

      </b-module>
  </div>
</template>

<script>
  import bModule from './b';
  export default {
    name: "A",
    components: {
      bModule
    }
  }
</script>

<template>
  <div>
    <slot :user="user" name="usr"></slot>
    <slot :goods="goods" name="gs"></slot>
  </div>
</template>
<script>
  export default {
    name: "B",
    data() {
      return {
        user: {
          name: '龍鸣',
        },
        goods: {
          total:100,
          shirt:10,
          dress:90
        },
      }
    },
  }

</script>

独占默认插槽的缩写语法

v-slot只能写在template模板上，这种特殊情况除外
当被提供的内容只有默认插槽时，组件的标签才可以被当作插槽的模板来使用。

	<template>
	 <div>
	 				// v-slot="prop"
	 				// #default="prop"
	     <b-module v-slot:default="prop">
	        {{prop.user.name}}
	     </b-module>
	 </div>
	</template>

<template>
  <div>
    <slot :user="user"></slot>
  </div>
</template>
<script>
  export default {
    name: "B",
    data() {
      return {
        user: {
          name: '龍鸣',
        },
      }
    },
  }  

解构插槽

如果是v-slot="prop"就会比较麻烦
{{prop.user.name}}
下面这种解构方法更简单

<template>
  <div>
      <b-module v-slot="{user}">
        {{user.name}}
      </b-module>
  </div>
</template>

还可以重命名

<template>
  <div>				//将user重命名为rename
      <b-module v-slot="{user: rename}">
        {{rename.name}}
      </b-module>
  </div>
</template>

可以定义后备内容，防止传过来的值是undefined的情况

<template>
  <div>
      <b-module v-slot="{user = {name:'hello world'}}">
        {{user.name}}
      </b-module>
  </div>
</template>

<template>
  <div>    //假设
    <slot :user="undefined"></slot>
  </div>
</template>