vue自主学习总结，插槽的使用2

vue学习

vue插槽的学习

作用域插槽
所谓作用域插槽，就是我们在子组件的插槽中传值给父组件，父组件通过获取值进行判断渲染，并将其返回给插槽。
上代码吧：

假设data如下
testData[
	{
		id :1,
		text : "first"
	},
	{
		id:2,
		text:"second"
	}
]
//child模板
<template>
	<ul>
      <li v-for="item in testData" :key="item.id">
        <slot name="testSlot" v-bind:itemData="item">
          {{item.text}}
        </slot>
      </li>
    </ul>
</template>

//父组件如下
<child>
	//scope 后的值与child中绑定的属性相同 
    <template slot="testSlot" scope="{itemData}">
      <span v-if="itemData.id==1">√</span>
        {{itemData.text}}
    </template>
</child>