vue插槽02-作用域插槽 $parent,$children,递归组件

---

提示：以下是本篇文章正文内容，下面案例可供参考

4.作用域插槽

官网：有时让插槽内容能够访问子组件中才有的数据是很有用的。

整体架构参考上篇vue插槽01
有的时候会想换掉备用内容，如Wrap组件模板内容如下 ：

App.vue
	<Wrap> 
	//这里为空时填充备用内容
	// {
   {value}} 这里是获取不到Wrap组件中的value
    </Wrap>
Wrap.vue
	<h1>wrap</h1>
    <slot> 
     这是slot标签内容备用内容{
   {
   value}}
    </slot>
    <p>这是wrap的P标签</p>
    <hr />

为了让 value 在父级的插槽内容中可用，我们可以将 value 作为 元素的一个 attribute绑定上去：

注意:v-slot只能添加在template上，只有在里面接收值的可以这样直接写

App.vue
	<h1>wrap</h1>
	//注意v-slot只能添加在template上，只有在里面接收值的可以这样直接写
	<Wrap v-slot:default="wrapValue">  
      {
   {
   wrapValue}}
      <Box :title="wrapValue.data"/> //Box组件也可以获取到这个值
    </Wrap>
Wrap.vue 	
	    <h1>wrap</h1>
	    <slot :data="value"> //进行绑定
	     这是slot标签内容备用内容{
   {
   value}}
	    </slot>
	    <hr />
    <script>
		export default {
   
		  data() {
   
		    return {
   
		      value: "wrap-value",
		    }
		  },
		};
	</script>
Box.vue	  
	   <h2>Box</h2> {
   {
   title}}
	<script>
	export default {
   
	  props: {
   
	    title: String,
	  }
	};
	</script>

解构插槽：

	<Wrap v-slot:default="{data}"> 
      {
   {
   data}