vue中的slot插槽

1.无名插槽
<body> <div id="app"> 123 </div> <script src="https://cdn.jsdelivr.net/npm/vue/dist/vue.js"></script> <script type="text/javascript"> //注册组件 Vue.component("my-component",{ template:"<span>Hello World!</span>" }) new Vue({ el:"#app", template:"<my-component>123</my-component>" }) </script> </body>

结果显示的是:Hello World!(组件中写的123并不显示)

当使用插槽时

<body>
        <div id="app">
            123
        </div>
        <script src="https://cdn.jsdelivr.net/npm/vue/dist/vue.js"></script>
        <script type="text/javascript">
            
            //注册组件
            Vue.component("my-component",{
                template:"<span>Hello World!<slot></slot></span>"
            })
            
            new Vue({
                el:"#app",
                template:"<my-component>123</my-component>"
            })
            
        </script>
    </body>

结果显示的是:Hello World!123(组建中写的123显示了)

<slot></slot>插槽的时候才可以显示自己组件中写的内容。

 

2.具名插槽

<body>
        <div id="app">
            <my-component>
                <h1 slot="girl">我是女孩</h1>
                <h1 slot="boy">我是男孩</h1>
                <span slot>123</span>
            </my-component>
        </div>
        <script src="https://cdn.jsdelivr.net/npm/vue/dist/vue.js"></script>
        <script type="text/javascript">
            //注册组件
            Vue.component("my-component",{
                template:`
                    <div>
                        <slot name="girl"></slot>
                        <slot name="boy"></slot>
                        <slot></slot>
                    </div>`
            })
            
            new Vue({
                el:"#app"
            })
            
        </script>
    </body>

显示结果:

我是女孩

我是男孩

123

3.作用域插槽

 

<body>
        <div id="app">
            <my-component>
                <template slot-scope="a">
                    {{a}}
                </template>
            </my-component>

        </div>
        <script src="https://cdn.jsdelivr.net/npm/vue/dist/vue.js"></script>
        <script type="text/javascript">
            //注册组件
            Vue.component("my-component", {
                template: `
                <div>
                    <slot hah="hi"></slot>
                </div>`
            })

            new Vue({
                el: "#app"
            })
        </script>
    </body>

显示结果为:

{ "hah": "hi" }

 

posted @ 2019-08-16 10:12  氧化成风  阅读(175)  评论(0编辑  收藏  举报