vue_slot插槽作用域 

<!DOCTYPE html>
<html lang="en">
<head>
  <meta charset="UTF-8">
  <title>Document</title>
  <script src="https://cdn.jsdelivr.net/npm/vue/dist/vue.js"></script>
</head>
<body>
  <div id="app">
    <h3>vue中作用域插槽</h3>
    <child>
      <!-- 固定写法template -->
      <!-- 当子组件循环或者某一部分dom结构应该由外部传入的时候使用 -->
      <!-- 有时让插槽内容能够访问子组件中才有的数据是很有用的。 -->
      <template v-slot="props">
      <!-- props保存的是子组件传递过来的数据，是一个对象 -->
        <h3>item{{props.item}}</h3>
      </template>
    </child>
  </div>
</body>
<script type="text/javascript">
  Vue.component('child', {
    data () {
      return {
        list: [1,2,3,4,5]
      }
    },
    template: `
      <div>
        <slot v-for="item of list" :item="item"></slot>
      </div>
    `
  })
  let vm = new Vue({
    el: '#app'
  })
</script>
</html>

 

posted @ 2020-03-05 17:13  前端之旅  阅读(461)  评论(0)    收藏  举报