8 - Vue - slot插槽

创建插槽文件
在自动注册组件下创建MySlotss/Iindex,通过props来传值

<template>
    <div>
        <slot name="h3">h3</slot>
        <slot name="h1">h1</slot>//用name接收#名字来排序
        <slot name="h2">h2</slot>
    </div>
</template>

<script>
export default {
    
}
</script>

使用插槽

<template>
  <div id="app">
 <MySlotsIindex>
  <template #h1>//通过#名字传给插槽
    <h1>1</h1>
  </template>

   <template #h2>
    <h2>2</h2>
  </template>

   <template  #h3>
    <h3>3</h3>
  </template>
  </MySlotsIindex>
  </div>
</template>

<script>
export default {
};
</script>

使用插槽的props,

<template>
  <div id="app">
 <MySlotsIindex>
  <template #1="props">
    <h1>count:{{ count }}</h1>//这里的count为props传来的
    <button @click="props.add">+</button>//用props.add,传来的方法
  </template>

解构props
   <template #default="{ count,add }">
    <h2>{{count}}</h2>
    <button @click="add">+</button>
  </template>
<script>
export default {
};
</script>

插槽的props

<slot :a="a" :count="count" name="h2" :add="add"></slot>
<script>
data(){
	return { count:0,a:10};
},
methods:{
	add(){
	this.count++
	}
}
</script>