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

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

小桥流水人家jjh

2737人浏览 · 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>

Vue

前往低代码交流专区

更多推荐

vue 表单验证

1、6位小写字母和数字必须包含两个字母rules: [{ required: true, message: "XXX不能为空", trigger: "blur" },{ max: 6, message: "最大长度为6位字符", trigger: "blur" },{pattern: /^(?=(?:[^a-z]*[a-z]){2})[a-z0-9]{6,6}$/, //不连续的两位字母// /^