volumeClaimTemplates 会被删除吗

具名插槽slot与v-solt插槽

使用插槽分成两步。

第一步 在组件元素内。为其它元素设置插槽名称。

通过slot属性设置。

第二步 在组件模板中，通过slot组件，使用这些元素。

通过name属性指令插槽名称

如果没有设置name属性，默认会使用剩余的元素。

使用插槽的时候，默认会引入slot属性所在的元素，

不想引入该元素，我们可以使用template模板元素。

使用template模板元素的时候，在新版本中，建议用v-slot指令代替slot属性

此时为插槽定义名称的语法是冒号语法。

v-slot:名称

注意：该指令不能给普通元素使用，如div，h1，span等。

只能给组件和template元素使用。

<div id="app">
        <h1>parent</h1>
        <!-- 使用子组件 -->
        <home>
            <!-- 1 设置插槽名称 -->
            <template slot="header">
                <h1>header</h1>
            </template>

            <!-- 普通元素不能使用 只能组件和template元素使用  会报错-->
            <!-- <div v-slot:demo></div> -->
            
             <!-- 没有指定名称的插槽 -->
            <div>
                <h1>body</h1>
            </div>


            <!-- 新版本中，建议使用v-slot指令 -->
            <template v-slot:footer>
                <h1>footer</h1>
            </template>

        </home>
    </div>
<!-- 模板 -->
<template id="tpl">
<div>
    <!-- 2 使用插槽 -->
    <slot name="header"></slot>
    <!-- 没有指定名称 -->
    <slot></slot>
    <h1>home component</h1>
    <slot name="footer"></slot>
</div>
</template>


import Vue from 'vue';

// 第二个子组件
let Home = Vue.extend({
	template: '#tpl'
})


// vue实例化对象
new Vue({
	// 注册
	components: { Home },
	// 容器
	el: '#app',
	// 数据
	data: {}
})

插槽作用域

作用域是指：在插槽中使用的数据存储在哪里。

默认在插槽中，使用的数据是父组件中的数据（插槽使用的元素，是在父组件模板中定义的）。

在插槽元素中，使用子组件中的数据分成两步。

第一步 为slot组件，传递子组件的数据

动态传递数据，使用v-bind指令

第二步 为v-slot指令赋值，定义接收数据的命名空间（作用域名称）

接收的数据，驼峰式命名

此时在元素中，通过该命名空间，可以使用传递的数据，

v-slot指令语法糖是#。

<div id="app">
        <h1>parent</h1>
        <!-- 使用子组件 -->
        <home>
       
            <!-- 语法糖 -->
            <template #header="childScope">

                  <!--msg: 'parent msg'  -->
                <h1>header -- {{msg}}</h1>

                <!-- 这里传递的是 color属性 以及子组件中的数据 以及:child-msg -->
                <h1>{{childScope}}</h1>

               <!-- 语法糖 childScope 传递的color为red  childMsg传递的是子组件中的msg -->
                <h1>{{childScope.color}}--{{childScope.childMsg}}</h1>

            </template>
        </home>
    </div>
    <!-- 模板 -->
    <template id="tpl">
<div>
    <!-- 1 传递属性 -->
    <slot name="header" color="red" :child-msg="msg"></slot>
    <!-- <h1>home component</h1> -->
    <input type="text" v-model="msg">
</div>
</template>


import Vue from 'vue';

// 第二个子组件
let Home = Vue.extend({
	template: '#tpl',
	// 数据
	data() {
		return {
			msg: 'child msg'
		}
	}
})

// vue实例化对象
new Vue({
	// 注册
	components: { Home },
	// 容器
	el: '#app',
	// 数据
	data: {
		msg: 'parent msg'
	}
})