您的位置: 首页  >  文章  >  vue学习19：使用插槽

vue学习19：使用插槽

分类: 文章 • 2025-01-21 15:50:10

子组件中，显示一段内容，这一段内容不是子组件决定的，而是由父组件决定的。

[html] view plain copy
  1. <div id="app">  
  2.         <bcontent>  
  3.             <p>I am Slot</p>  
  4.         </bcontent>  
  5.     </div>  
  6.     <script>  
  7.         var bcontent = {  
  8.             template:  `<div>  
  9.                             我是插槽  
  10.                             <slot></slot>  
  11.                         </div>`  
  12.         }  
  13.         var app = new Vue({  
  14.             el: '#app',  
  15.             components: {  
  16.                 bcontent  
  17.             }  
  18.         })  

vue学习19：使用插槽

2、具名插槽：当父组件传递多个插槽的时候

vue学习19：使用插槽

3、作用域插槽

vue学习19：使用插槽

相关推荐