插槽中的数据绑定

最新推荐文章于 2024-07-13 17:05:10 发布

weixin_34212189

最新推荐文章于 2024-07-13 17:05:10 发布

阅读量657

点赞数

文章标签： javascript ViewUI

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

版权

 
   <body> 
  
   <div 
     
   id 
   = 
   "app" 
   > 
  
   <!-- 组件中的数据(data,props,computed)只能在组件自己的模板中使用 --> 
  
   <!-- <com>{{child}}</com> --> 
  
   <input 
     
   type 
   = 
   "text" 
     
   v-model 
   = 
   "str" 
   > 
  
   <com> 
   {{str}} 
   </com> 
  
   </div> 
  
   </body> 
  
   <script 
     
   src 
   = 
   "vue.js" 
   ></script> 
  
   <script 
     
   type 
   = 
   "text/html" 
     
   id 
   = 
   "com" 
   > 
  
   <div> 
  
   <h1> 
  
   <slot></slot> 
  
   </h1> 
  
   </div> 
  
   </script> 
  
   <script> 
  
   Vue 
   . 
   component 
   ( 
   "com" 
   ,{ 
  
   template: 
   "#com" 
   , 
  
   data 
   (){ 
  
   return 
    { 
  
   child: 
   "这是子组件中的数据" 
  
    } 
  
    } 
  
    }); 
  
   new 
     
   Vue 
   ({ 
  
   el: 
   "#app" 
   , 
  
   data: 
   { 
  
   str: 
   "这是根组件的数据" 
  
    } 
  
    }); 
  
   < 
   /script>