vue 具名插槽用法

vue 具名插槽用法

<!DOCTYPE html>
<html lang="en">

<head>
    <meta charset="UTF-8">
    <meta http-equiv="X-UA-Compatible" content="IE=edge">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>具名插槽</title>
</head>

<body>
    <div id="app">
        <div class="father">
            <h3>这里是父组件</h3>
            <child>
                <!-- <span slot="demo1">001</span> -->
                <span>菜单2</span>
                <!-- <span slot="demo3">002</span> -->
                <template v-slot:demo3>
                    <span>我的插槽</span>
                </template>
                <!-- 父组件填充内容, 父组件通过 v-slot:[name] 的方式指定到对应的插槽中 -->
            </child>
        </div>
    </div>

    <!-- 注意:

1.  父级的填充内容如果指定到子组件的没有对应名字插槽,那么该内容不会被填充到默认插槽中。

2.  如果子组件没有默认插槽,而父级的填充内容指定到默认插槽中,那么该内容就“不会”填充到子组件的任何一个插槽中。

3.  如果子组件有多个默认插槽,而父组件所有指定到默认插槽的填充内容,将“会” “全都”填充到子组件的每个默认插槽中。 -->

    <template id="child">
        <div class="child">
            <h3>这里是子组件</h3>
            <slot></slot>
            <slot name="demo3">
                <slot>
        </div>
    </template>

    <!-- 具名插槽其实就是在父组件中添加一个 slot='自定义名字' 的属性,
然后在子组件中的 <slot><slot> 里面添加 name='自定义名字' 即可
如果父组件中有一部分没有添加 slot 属性,则此处就是默认的插槽,
在子组件中的 <slot></slot> 直接就是使用的父组件的默认插槽部分
 -->

    <script src="js/vue.js"></script>
    <script>
        let vm = new Vue({
            el: '#app',
            data: {},
            components: {
                child: {
                    template: '#child'
                }
            }

        });
    </script>
</body>

</html>

你可能感兴趣的:(vue.js,javascript,es6,前端框架,vue.js,前端)