vue--使用插槽和具名插槽解决组件内容传递问题

公共部分：

<div id="root"></div>

<script src="https://unpkg.com/vue@next"></script>

---

1.插槽：

<script>
        // slot 插槽  里面可以传的有 DOM文档、字符串、数字、子组件等
        // slot 无法直接绑定事件
        const app = Vue.createApp({
            template: `
             <myForm>
               <test />   
            </myForm>
             <myForm>
                <button>提交</button>
             </myForm>
            `
        });

        //v-model后面的修饰符，例如：.uppercase，通过 props 传递给子组件
        //子组件通过 modelModifiers 来进行接收，

        // 创建全局组件
        app.component('myForm', {
            methods: {
                handleClick() {
                    alert(123);
                },
            },
            template: `
            <div>
                <input />
                <span @click="handleClick">
                    <slot></slot>
                </span>
            </div>
            `,
        });

        app.component('test', {
            template: '<div>test</div>'
        })

        //将组件挂到root节点里，即只作用在id等于root的div元素里
        //vm 代表的就是 vue 应用的根组件
        const vm = app.mount('#root');

        //vm.$data 获得数据
        // vm.$data.message = 'root';
</script>

或，

<script>
        // slot 插槽  里面可以传的有 DOM文档、字符串、数字、子组件等
        // slot 无法直接绑定事件
        //父模板里调用的数据属性，使用的都是父模板里的数据
        //子模板里调用的数据属性，使用的都是子模板里的数据
        const app = Vue.createApp({
            data() {
                return {
                    text: '提交'
                }
            },
            template: `
             <myForm>
                <div>{{text}}</div>  
            </myForm>
             <myForm>
                <button>{{text}}</button>
             </myForm>
            <myForm></myForm>
            `
        });

        //v-model后面的修饰符，例如：.uppercase，通过 props 传递给子组件
        //子组件通过 modelModifiers 来进行接收，

        // 创建全局组件
        app.component('myForm', {
            methods: {
                handleClick() {
                    alert(123);
                },
            },
            template: `
            <div>
                <input />
                <span @click="handleClick">
                    <slot>default value</slot>
                </span>
            </div>
            `,
        });

        app.component('test', {
            template: '<div>test</div>'
        })

        //将组件挂到root节点里，即只作用在id等于root的div元素里
        //vm 代表的就是 vue 应用的根组件
        const vm = app.mount('#root');

        //vm.$data 获得数据
        // vm.$data.message = 'root';
</script>

---

2.具名插槽:

有时我们需要多个插槽

对于这样的情况，<slot> 元素有一个特殊的 attribute：name。这个 attribute 可以用来定义额外的插槽

在向具名插槽提供内容的时候，我们可以在一个 <template> 元素上使用 v-slot 指令，并以 v-slot 的参数的形式提供其名称

现在 <template> 元素中的所有内容都将会被传入相应的插槽

任何没有被包裹在带有 v-slot 的 <template> 中的内容都会被视为默认插槽的内容

如果你希望更明确一些，仍然可以在一个 <template> 中包裹默认插槽的内容

注意 v-slot 只能添加在 <template> 上 (只有一种例外情况)，这一点和已经废弃的 slot attribute 不同

<script>
        // 具名插槽 
        const app = Vue.createApp({
            data() {
                return {
                    text: '提交'
                }
            },
            // v-slot: === #
            template: `
             <layout>
                <template v-slot:header>
                    <div>header</div> 
                </template>
                <template v-slot:footer> 
                    <div>footer</div> 
                </template> 
            </layout>
            `
        
            //或者
            // template: `
            //  <layout>
            //     <template #header>
            //         <div>header</div>
            //     </template>
            //     <template #footer>
            //         <div>footer</div>
            //     </template>
            // </layout>
            // `
        });

        //v-model后面的修饰符，例如：.uppercase，通过 props 传递给子组件
        //子组件通过 modelModifiers 来进行接收，

        // 创建全局组件
        app.component('layout', {
            template: `
            <div>
               <slot name="header"></slot>
               <div>content</div>
               <slot name="footer"></slot>
            </div>
            `,
        });

        //将组件挂到root节点里，即只作用在id等于root的div元素里
        //vm 代表的就是 vue 应用的根组件
        const vm = app.mount('#root');

        //vm.$data 获得数据
        // vm.$data.message = 'root';
</script>