Advertisement

vue2.x中slot插槽的应用

阅读量:

插槽对应于slot这一术语,子组件中存在一部分内容,可根据父组件传递过来的DOM元素进行展示,该部分通过slot标签进行标识;父组件可在该预留位置注入相应的内容。
倘若子组件中未包含slot,则父组件传递给它的所有内容将不会被呈现!

1.匿名插槽

子组件需通过slot来预留位置,以接收父组件传递过来的内容

复制代码
    <!-- 父组件 -->
    <template>
    <div>
        <Child>
            <div>3.8女神节!</div>
        </Child>
    </div>
    </template>
    <!-- 子组件 -->
    <template>
    <div>
        <h1>今天的节日是:</h1>
        <slot></slot>
    </div>
    </template>
    
    
      
      
      
      
      
      
      
      
      
      
      
      
      
      
      
    

![在这里插入图片描述](https://ad.itadn.com/c/weblog/blog-img/im

全部评论 (0)

还没有任何评论哟~