子组件中
<template>
<div >
<strong>Error!</strong>
</div>
</template>
父组件中
<template>
<div >
<Slo>
Something bad happened.
</Slo>
</div>
</template>
<script>
import Slot from "./components/Slot";
export default {
name: "App",
data: function() {
return {
};
},
components: {
Slo: Slot //这里为了不和vue标签slot重名注册为Slo
},
};
</script>
上面这样无法直接显示出插入的
Something bad happened
子组件中加入
<slot></slot>
<template>
<div >
<strong>Error!</strong>
<slot></slot>
</div>
</template>
这样就可以显示出来了。