父组件 : <template> <div class="app"> <!-- 1.内容是button --> <show-message title="哈哈哈"> <button>我是按钮元素</button> </show-message> <!-- 2.内容是超链接 --> <show-message> <a href="#">百度一下</a> </show-message> <!-- 3.内容是一张图片 --> <show-message> <img src="@/img/kobe02.png" alt=""> </show-message> <!-- 4.内容没有传递 --> <show-message></show-message> </div> </template> <script> import ShowMessage from './ShowMessage.vue' export default { components: { ShowMessage } } </script> <style scoped> </style>
子组件 : <template> <div class="content"> <slot> <p>我是默认内容, 哈哈哈</p> </slot> </div> </template>
标签:vue,default,插槽,普通,components,组件,ShowMessage From: https://www.cnblogs.com/qd-lbxx/p/16612688.html