vue2之各种插槽

插槽也是用于vue间创建的数据的一种方式，一般都是传递html元素。比如可以用于定义一个带样式的title等

• 默认插槽：没有name的插槽

----父组件------
<template>
    <div>
        <TypeCom>
       	    <!-- 如果这里的注释放开，那么子组件中默认的i标签就会被覆盖 -->
            <!-- <span>这是新加的</span> -->
        </TypeCom>
        
    </div>
</template>

-----子组件-----
<template>
    <div>
        <p>这是本来就有的</p>
        <slot>
            <i>如果在用此组件的地方没有传递html，则显示默认的</i>
        </slot>
    </div>
</template>

• 具名插槽：顾名思义，有名字的插槽。用于多个插槽的地方

-----子组件-----
<template>
    <div>
        <p>这是本来就有的</p>
        <slot name="title">
            <i>如果在用此组件的地方没有传递html，则显示默认的</i>
        </slot>

        <slot name="content">
            这是默认的内容
        </slot>
    </div>
</template>

-----父组件-----
<template>
    <div>
        <TypeCom>
            <template slot="title">
                新的title
            </template>
            <!-- 直接写slot=""和v-slot：是一样的，v-slot语法是2.6.0以后的 -->
            <template v-slot:content>
                <div>这是新的content</div>
            </template>
        </TypeCom>
    </div>
</template>

• 作用域插槽：一般是用来父组件要根据子组件的值做显示。假如在子组件里有有一些数据，父组件要拿到这些数据，做不同的处理

---子组件----
<template>
    <div>
        <p>这是本来就有的</p>
        <slot name="title" :arrData1="arr">
            <i>如果在用此组件的地方没有传递html，则显示默认的</i>
        </slot>

        <slot name="content" :arrData2="arr">
            这是默认的内容
        </slot>
    </div>
</template>

<script>
export default {
    data() {
        return {
            arr: ['小明', '小红', '小李', '小文']
        }
    }
}
</script>


-----父组件------
<template>
    <div>
        <TypeCom>
            <template slot="title" slot-scope="data1">
                <h4 v-for="item in data1.arrData1" :key="item">{{ item }}--title</h4>
            </template>

            <template  #content="data2">
            <!--<template  v-slot:content="data2"> 等同于上面写法，上面是2.6.0后的新语法，这三种写法都可以 -->
            <!-- 等同于 <template #content="{arrData2}">，拿到arrData2之后，进行结构-->

                <ul v-for="con in data2.arrData2" :key="con">
                    <li>{{ con }}---content</li>
                </ul>
            </template>
        </TypeCom>
    </div>
</template>