Vue 作用域插槽列表组件示例

看了官网的Vue作用域插槽示例，不是特别明白，又在网上搜索了下其他的示例参考了下，然后大概清楚了点，就写了个小示例：<!DOCTYPE html><html><head><title>Vue 作用域插槽列表组件示例</title><scrip

小桥流水人家jjh

2771人浏览 · 2018-03-30 10:35:53

小桥流水人家jjh · 2018-03-30 10:35:53 发布

看了官网的Vue作用域插槽示例，不是特别明白，又在网上搜索了下其他的示例参考了下，然后大概清楚了点，就写了个小示例：

  <!DOCTYPE html>
 
  <html>
 
  <head>
 
  <title>Vue 作用域插槽 列表组件 示例</title>
 
  <script src="https://cdn.jsdelivr.net/npm/vue/dist/vue.js"></script>
 
  </head>
 
  <body>
 
  <div id="app">
 
  <child :favorite="items">
 
  <li slot="item" slot-scope="item">{{item.text}}-{{item.message}}</li>
 
  </child>
 
  </div>
 
  <script>
 
   Vue.component('child',{
 
   props:['favorite'],
 
   template:`
 
   <ul>
 
   <slot name="item" v-for="cute in favorite" :text="cute.text" :message="cute.msg"></slot>
 
   </ul>
 
   `
 
   })
 
   var app = new Vue({
 
   el:'#app',
 
   data:{
 
   items:[
 
   {text:'ss',msg:'睡睡'},
 
   {text:'ww',msg:'玩玩'},
 
   {text:'cici',msg:'吃吃'}
 
   ]
 
   }
 
   })
 
   </script>
 
  </body>
 
  </html>