SOURCE

let store = Vue.observable({ count: 0, name: '李四' });
let mutations = {
    setCount(count) {
        store.count = count;
    },
    changeName(name) {
        store.name = name;
    }
}

let mySlot = {
    template: `
        <div>
            <div>
                header:
                <slot name="header"></slot>
            </div>

            <div>
                main:
                <slot></slot>
            </div>

            <div>
                footer:
                <slot name="footer"></slot>
            </div>

            count: {{ count }}, name: {{ name }}
        </div>
    `,
    computed: {
        count() {
            return store.count;
        },
        name() {
            return store.name;
        },
    },
}

let todoList = {
    template: `
        <ul>
            <li v-for="todo in todos" :key="todo.id">
                <slot :todo="todo">
                </slot>
            </li> 
        </ul>
    `,
    props: {
        todos: {
            type: Array,
        }
    }
}

let App = {
    template: `
        <div>
            <todo-list :todos="todos">
                <template #default="{ todo }">
                    <span v-if="todo.isComplete">√</span>
                    <span>{{ todo.text }}</span>
                </template>
            </todo-list>
            <my-slot>
                <template v-slot:header="{ name = '初始化' }">
                    我是header！{{ name }}
                </template>
                <button>主要button</button>
                <template #footer>
                    我是footer
                </template>
            </my-slot>
            <div>
                <button @click="setCount(count+1)">+1</button>
                {{ count }}
                <button @click="setCount(count-1)">-1</button>
                <button @click="changeName('213')">改变名字</button>
                {{ name }}
            </div>
        </div>
    `,
    components: {
        todoList, mySlot,
    },
    data() {
        return {
            todos: [
                {
                id: 0,
                text: 'ziwei0',
                isComplete: false
                },
                {
                text: 'ziwei1',
                id: 1,
                isComplete: true
                },
            ],
        };
    },
    computed: {
        count() {
            return store.count;
        },
        name() {
            return store.name;
        },
    },
    methods: {
        setCount: mutations.setCount,
        changeName:mutations.changeName,
    }
}

new Vue({
    render:(h) => h(App),
}).$mount('#app');

<div id="app">
</div>