组件插槽

最新推荐文章于 2024-05-31 15:55:23 发布

weixin_34352005

最新推荐文章于 2024-05-31 15:55:23 发布

阅读量122

点赞数

文章标签： javascript ViewUI

原文链接：https://yq.aliyun.com/articles/648260

版权

 
   <body> 
  
   <div 
     
   id 
   = 
   "app" 
   > 
  
   <!-- 组件标签中的内容不能直接在组件模板中显示，会被丢弃掉 --> 
  
   <!-- 组件标签中的内容可以通过插槽(slot)传给组件的模板 --> 
  
   <com> 
  
   <b> 
   组件标签中的内容能否在组件模板中显示？ 
   </b> 
  
   </com> 
  
   </div> 
  
   </body> 
  
   <script 
     
   src 
   = 
   "vue.js" 
   ></script> 
  
   <script 
     
   type 
   = 
   "text/html" 
     
   id 
   = 
   "com" 
   > 
  
   <div> 
  
   <h1> 
   这里是标题 
   </h1> 
  
   <p> 
  
   <!-- 在组件的模板中可以使用slot标签，在组件渲染时slot标签会被替换为组件使用时标签中的内容。 --> 
  
   <slot></slot> 
  
   </p> 
  
   </div> 
  
   </script> 
  
   <script> 
  
   Vue 
   . 
   component 
   ( 
   "com" 
   ,{ 
  
   template: 
   "#com" 
   , 
  
   mounted 
   () { 
  
   // 通过插槽传入组件中的数据一般都是直接显示在组件的模板上，不需要再代码中使用，但是代码中也可以通过this.$slots获得插槽内容。 
  
   console 
   . 
   log 
   ( 
   this 
   . 
   $slots 
   ); 
  
    }, 
  
    }) 
  
   new 
     
   Vue 
   ({ 
  
   el: 
   "#app" 
   , 
  
   data: 
   { 
  
    } 
  
    }) 
  
   < 
   /script>