vue <slot>子模版向父模板传递数据

<div id="app">
        <my-button>
            <template v-slot:default="{sonFunc}">
                {{ sonFunc.submit }}
            </template>
        </my-button>
        <my-span>222</my-span>
        <todo-list>
            <template v-slot:todo="{todo}">
                <span v-if="todo.isComplete">✓</span>
                {{todo.text}}
            </template>
        </todo-list>
    </div>
    <script>
        var app = new Vue({
            el: "#app",
            data: function () {
                return {
                    str: "exit",
                    fatherFunc: {
                        quit: "quit"
                    },
                }
            },
            components: {
                "myButton": {
                    template: `
                    <button>
                        <slot :sonFunc="sonFunc">{{sonFunc.save}}</slot>
                    </button>
                    `,
                    data: function () {
                        return {
                            sonFunc: {
                                save: "save",
                                submit: "submit"
                            },
                        }
                    }
                },
                mySpan: {
                    template: `
                        <span>
                            <slot>
                                {{title}}
                            </slot>
                        </span>
                    `,
                    data() {
                        return {
                            title: "111"
                        }
                    }
                },
                todoList: {
                    template: `
                            <ul>
                                <li v-for="todo in todos">
                                    <slot name="todo" :todo="todo">
                                        {{todo.text}}
                                    </slot>
                                </li>
                            </ul>
                    `,
                    data() {
                        return {
                            todos: [
                                { text: "学习语文", isComplete: true },
                                { text: "学习数学", isComplete: true },
                                { text: "学习英语", isComplete: false }
                            ]
                        }
                    }
                }
            }
        })
    </script>

在vue中使用<slot>可以实现在自定义的标签中插入文本或标签，如果在父模板中需要获取子模版中的数据，则需要在子模版的<slot>中添加属性并绑定数据如上图<slot :sonFunc="sonFunc">{{sonFunc.save}}</slot>，注意属性和数据名需要一致。然后在父模板中<template v-slot:default="{sonFunc}">{{ sonFunc.submit }}</template>，v-slot:default="{sonFunc}"意思为对应子模版中的"name"为默认值的slot，并且将子模版中的值sonFunc传递给父模板，使用{}是解构赋值，因为传递来的值外面包裹了{},成为一个新的对象。如果没有使用解构赋值如v-slot:default="f"}，则取值需要这么写{{f.sonFunc.submit}}