【20】vue.js — slot占位符

默认情况下我们使用组件会将组件标签内的内容给替换掉，不会显示组件内的内容<!DOCTYPE html><html lang="en"><head><meta charset="UTF-8"><title>Document</title><script src="js/vue.js"></script><style>

有心博客

4247人浏览 · 2017-09-12 10:06:27

有心博客 · 2017-09-12 10:06:27 发布

默认情况下我们使用组件会将组件标签内的内容给替换掉，不会显示组件内的内容

<!DOCTYPE html>
<html lang="en">
    <head>
        <meta charset="UTF-8">
        <title>Document</title>
        <script src="js/vue.js"></script>
        <style>
        </style>
    </head>
    <body>
        <div id="box">
            <aaa>
                <ul>
                    <li>1111</li>
                    <li>2222</li>
                    <li>3333</li>
                </ul>
            </aaa>
        </div>
        <script>
            var vm=new Vue({
                el:'#box',
                data:{
                    a:'aaa'
                },
                components:{
                    'aaa':{
                        template:'<h1>xxxx</h1>'
                    }
                }
            });
        </script>
    </body>
</html>

未使用slot

使用slot来占位

<!DOCTYPE html>
<html>
    <head>
        <meta charset="UTF-8">
        <title></title>
        <script type="text/javascript" src="js/vue.js" ></script>
    </head>
    <body>
        <div id="box">
            <aaa>
                <ul>
                    <li>111</li>
                    <li>222</li>
                    <li>333</li>
                </ul>
            </aaa>
            <hr />
            <aaa></aaa>
        </div>
        <template id="aaa">
            <h1>我是模板一</h1>
            <slot>这是默认的情况</slot>
            <p>welcome vue</p>
        </template>
    </body>
    <script>
        var vm = new Vue({
            el: '#box',
            components: {
                'aaa': {
                    template: '#aaa'
                }
            }
        });
    </script>
</html>

有区分的替换占位

<!DOCTYPE html>
<html>
    <head>
        <meta charset="UTF-8">
        <title></title>
        <script type="text/javascript" src="js/vue.js" ></script>
    </head>
    <body>
        <div id="box">
            <aaa>
                <ul slot="ul-slot">
                    <li>111</li>
                    <li>222</li>
                    <li>333</li>
                </ul>
                <ol slot="ol-slot">
                    <li>aaa</li>
                    <li>bbb</li>
                    <li>ccc</li>
                </ol>
            </aaa>
            <hr />
            <aaa></aaa>
        </div>
        <template id="aaa">
            <h1>我是模板一</h1>
            <slot name="ul-slot">ul替换占位符</slot>
            <slot name="ol-slot">ol替换占位符</slot>
            <p>welcome vue</p>
        </template>
    </body>
    <script>
        var vm = new Vue({
            el: '#box',
            components: {
                'aaa': {
                    template: '#aaa'
                }
            }
        });
    </script>
</html>

vue占位槽slot

Vue

前往低代码交流专区

更多推荐

vue 表单验证

1、6位小写字母和数字必须包含两个字母rules: [{ required: true, message: "XXX不能为空", trigger: "blur" },{ max: 6, message: "最大长度为6位字符", trigger: "blur" },{pattern: /^(?=(?:[^a-z]*[a-z]){2})[a-z0-9]{6,6}$/, //不连续的两位字母// /^