vue-slot-scope

slot作用域插槽

by li gang

HTML

<header>
  <script src="https://cdnjs.cloudflare.com/ajax/libs/vue/2.4.0/vue.js"></script>
</header>

<body>
  <div id="app">
    <my-component>
      <template scope="props">
        <p>父组件分发内容</p>
        <p>{{props.message}}</p>
      </template>
    </my-component>
    <my-list :list="['a.com', 'b.com']">
      <template slot="item" scope="props">
        <li class="link"><a>{{props.link}}</a></li>
      </template>
    </my-list>
  </div>
</body>

JavaScript

const app = new Vue({
  el: '#app',
  components: {
    'my-component': {
      template: `<div>
      	<slot message="哈哈"></slot>
      </div>`
    },
    'my-list': {
      props: ['list'],
      template: `<ul>
      	<slot name="item" v-for="item in list" :link="item"></slot>
      </ul>`
    }
  }
});