vue中v-solt插槽的使用

左手的ㄟ右手 2021-09-02 05:37 411阅读 0赞

### 具名插槽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>
                
                <template slot="header">
                    <h1>header</h1>
                </template>
    
                
                
                
                 
                <div>
                    <h1>body</h1>
                </div>
    
    
                
                <template v-slot:footer>
                    <h1>footer</h1>
                </template>
    
            </home>
        </div>
    
    <template id="tpl">
    <div>
        
        <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: {}
    })

### ![watermark_type_ZmFuZ3poZW5naGVpdGk_shadow_10_text_aHR0cHM6Ly9ibG9nLmNzZG4ubmV0L3FxXzQxMzI4MjQ3_size_16_color_FFFFFF_t_70][] ###

## ##

### 插槽作用域 ###

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

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

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

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

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

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

接收的数据，驼峰式命名

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

v-slot指令语法糖是\#。

<div id="app">
            <h1>parent</h1>
            
            <home>
           
                
                <template #header="childScope">
    
                      
                    <h1>header -- {
       {msg}}</h1>
    
                    
                    <h1>{
       {childScope}}</h1>
    
                   
                    <h1>{
       {childScope.color}}--{
       {childScope.childMsg}}</h1>
    
                </template>
            </home>
        </div>
        
        <template id="tpl">
    <div>
        
        <slot name="header" color="red" :child-msg="msg"></slot>
        
        <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'
    	}
    })

![watermark_type_ZmFuZ3poZW5naGVpdGk_shadow_10_text_aHR0cHM6Ly9ibG9nLmNzZG4ubmV0L3FxXzQxMzI4MjQ3_size_16_color_FFFFFF_t_70 1][]

[watermark_type_ZmFuZ3poZW5naGVpdGk_shadow_10_text_aHR0cHM6Ly9ibG9nLmNzZG4ubmV0L3FxXzQxMzI4MjQ3_size_16_color_FFFFFF_t_70]: /images/20210813/28cdba9e83d149abb6976bae082e105e.png
[watermark_type_ZmFuZ3poZW5naGVpdGk_shadow_10_text_aHR0cHM6Ly9ibG9nLmNzZG4ubmV0L3FxXzQxMzI4MjQ3_size_16_color_FFFFFF_t_70 1]: /images/20210813/a24e41f234b946a3b79dd4c8f1bb9242.png