使用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>
3588
被折叠的 条评论
为什么被折叠?
到【灌水乐园】发言
