Vue中使用v-slot无效

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

<body>
    <div id="app">
        <my-button>
            <template v-slot:before>
                <em>我是组件中间的内容:slotem>
            template>
            
            <template #after>
                <strong>hehestrong>
            template>
        my-button>
    div>

    <template id="divBox">
        <div>
            <p>hello worldp>
            <slot name="before">slot>
            <br>
            <button>clickbutton>
            <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>我是组件中间的内容:slotem>
            template>
            
            <template slot="after">
                <strong>哈哈哈strong>
            template>
        my-button>
    div>

    <template id="divBox">
        <div>
            <p>hello worldp>
            <slot name="before">slot>
            <br>
            <button>clickbutton>
            <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,javascript,vue.js)