通过插槽分发内容

子组件中

<template> <div id="app"> <strong>Error!</strong> </div> </template>

父组件中

<template> <div id="app"> <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 id="app"> <strong>Error!</strong> <slot></slot> </div> </template>

这样就可以显示出来了。

转载于:https://www.cnblogs.com/guangzan/p/11269051.html

相关资源：JAVA上百实例源码以及开源项目