Vue中使用v-slot无效

使用v-slot不生效的情况：可能是引入的vue.js源码不是最新的。如下代码：<body><div id="app"><my-button><template v-slot:before><em>我是组件中间的内容：slot</em></template><!-- #是v-s

南柯Seven

6526人浏览 · 2021-04-28 16:22:09

南柯Seven · 2021-04-28 16:22:09 发布

使用v-slot不生效的情况：可能是引入的vue.js源码不是最新的。
如下代码：

<body>
    <div id="app">
        <my-button>
            <template v-slot:before>
                <em>我是组件中间的内容：slot</em>
            </template>
            <!-- #是v-slot的缩写 -->
            <template #after>
                <strong>hehe</strong>
            </template>
        </my-button>
    </div>

    <template id="divBox">
        <div>
            <p>hello world</p>
            <slot name="before"></slot>
            <br>
            <button>click</button>
            <br>
            <slot name="after"></slot>
        </div>
    </template>
    

    <script src="js/vue.min.js"></script>
    <script type="text/javascript">
        Vue.component('my-button', {
            template: "#divBox"
        });

        new Vue({
            el: '#app'
        });

    </script>
</body>

可以把v-slot修改为slot的形式，查看是否生效，如果是生效的，说明就是目前的vue.js版本没有更新。

<body>
    <div id="app">
        <my-button>
            <template slot="before">
                <em>我是组件中间的内容：slot</em>
            </template>
            <!-- #是v-slot的缩写 -->
            <template slot="after">
                <strong>哈哈哈</strong>
            </template>
        </my-button>
    </div>

    <template id="divBox">
        <div>
            <p>hello world</p>
            <slot name="before"></slot>
            <br>
            <button>click</button>
            <br>
            <slot name="after"></slot>
        </div>
    </template>
    

    <script src="js/vue.min.js"></script>
    <script type="text/javascript">
        Vue.component('my-button', {
            template: "#divBox"
        });

        new Vue({
            el: '#app'
        });

    </script>
</body>

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}$/, //不连续的两位字母// /^