vueファミリーバケツのスロットslot(9)

スロット、つまりslotは、コンポーネントのHTMLテンプレートであり、slotの最も核心的な2つの問題は、表示されないこととどのように表示されるかです.
1、単一slot
名前属性を設定せずに、別名のデフォルトスロット、匿名スロット

    
        12345
    

    var app = new Vue({
        el: '#app',
        components: {
            children1: {
                template: "<button><slot></slot>    </button>"
            }
        }
    });

2、具名slot
スロットにname属性を付けると、名前付きスロットになります.名前付きスロットは、1つのコンポーネントにN回、異なる場所に表示できます.

    
        12345
        56789
    

    var app = new Vue({
        el: '#app',
        methods: {
            tobeknow: function () {
                console.log("It is the parent's method");
            }
        },
        components: {
            children2: {//      ，        
                template: "<button><slot name='first'></slot>    ，<slot name='second'></slot></button>"
            }
        }
    });

3、作用域slot
vue2.5バージョンではscopeの代わりにslot-scopeが役割ドメインスロットを実現し、主にコンポーネント呼び出しで使用され、具体的にはtemplateラベルの上でslot-scopeを使用してスロットslotの上の属性値を取得し、値を取得するのはオブジェクトであり、slot-scope="任意の文字列を取ることができます"とelement-uiのコンポーネントでよく見られます.

    
    
        
        
    

    var app = new Vue({
        el: '#app',
        data: {
            data: [{
                name: 'kongzhi1',
                age: '29',
                sex: 'man'
            }]
        },
        components: {
            //    slot
            'tb-list': {
                template:
                    `<ul>
                        <li v-for="(item, index) in data">
                            <slot :row="item" :$index="index"></slot>
                        </li>
                    </ul>`,
                //    
                props: ['data']
            }
        }
    });

完全なコードの例

html>
    
    
    

    
        12345
    

    
        12345
        56789
    

    
    
        
        
    

    var app = new Vue({
        el: '#app',
        data: {
            data: [{
                name: 'kongzhi1',
                age: '29',
                sex: 'man'
            }]
        },
        methods: {
            tobeknow: function () {
                console.log("It is the parent's method");
            }
        },
        components: {
            //   slot
            children1: {
                template: "<button><slot></slot>    </button>"
            },
            //   slot
            children2: {
                template: "<button><slot name='first'></slot>    ，<slot name='second'></slot></button>"
            },
            //    slot
            'tb-list': {
                template:
                    `<ul>
                        <li v-for="(item, index) in data">
                            <slot :row="item" :$index="index"></slot>
                        </li>
                    </ul>`,
                //    
                props: ['data']
            }
        }
    });