首页 > 其他分享 >普通插槽

普通插槽

时间:2022-08-22 14:37:02浏览次数:66  
标签:vue default 插槽 普通 components 组件 ShowMessage

父组件 : 

<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

相关文章