zidom/index.html

## index.html
<!DOCTYPE html>
<html>
<head>
  <meta charset="utf-8">
  <meta name="viewport" content="width=device-width">
  <title>JS Bin</title>
  <script src="https://cdn.jsdelivr.net/npm/vue"></script>
</head>
<body>
  <h4>demo 1</h4>
<div id="app">
  <vlist>
    <span slot="slot1-0">Hi</span>
    <span slot="slot2-2">some body!</span>
  </vlist>
</div>

<hr>
  <h4>demo 2</h4>
<h4>How can do it like follow code?</h4>
<div id="app1">
  <vlist>
    <span :slot="`slot1-${index}`" slot-scope="{index}">Hi {{index}}</span>
    <span :slot="`slot2-${index}`" slot-scope="{index}">hello {{index}}</span>
  </vlist>
</div>

<script type="text/x-template" id="mylist">
<ul>
  <li v-for="(c, idx) in ['a','b','c','d']" :key='idx'>
    {{c}}:
    <slot :name="`slot1-${idx}`"><slot>
    <slot :name="`slot2-${idx}`"><slot>
  </li>
</ul>
</script>
<script>
  Vue.component('vlist',{
    template:'#mylist'
  })

  new Vue({
    el:'#app'
  })

  new Vue({
    el:'#app1'
  })
</script>


</body>
</html>
	<!DOCTYPE html>
	<html>
	<head>
	<meta charset="utf-8">
	<meta name="viewport" content="width=device-width">
	<title>JS Bin</title>
	<script src="https://cdn.jsdelivr.net/npm/vue"></script>
	</head>
	<body>
	<h4>demo 1</h4>
	<div id="app">
	<vlist>
	<span slot="slot1-0">Hi</span>
	<span slot="slot2-2">some body!</span>
	</vlist>
	</div>

	<hr>
	<h4>demo 2</h4>
	<h4>How can do it like follow code?</h4>
	<div id="app1">
	<vlist>
	<span :slot="`slot1-${index}`" slot-scope="{index}">Hi {{index}}</span>
	<span :slot="`slot2-${index}`" slot-scope="{index}">hello {{index}}</span>
	</vlist>
	</div>

	<script type="text/x-template" id="mylist">
	<ul>
	<li v-for="(c, idx) in ['a','b','c','d']" :key='idx'>
	{{c}}:
	<slot :name="`slot1-${idx}`"><slot>
	<slot :name="`slot2-${idx}`"><slot>
	</li>
	</ul>
	</script>
	<script>
	Vue.component('vlist',{
	template:'#mylist'
	})

	new Vue({
	el:'#app'
	})

	new Vue({
	el:'#app1'
	})
	</script>


	</body>
	</html>