vue slot

//父组件代码
<template>
  <div>
    <p>我是父组件</p>
    <detail-serod   >
        <div>
            <p>{{contant}}</p>
        </div>
    </detail-serod>
  </div>
</template>
<script>
import DetailSerod from "./DetailSerod";
export default {
  name: "Detail",
  data() {
    return {
      contant:'来自父组件的内容',  
    };
  },
  components: {
    DetailSerod
  },

};
</script>

子组件中的代码：

<template>
  <div>
    <p>我是子组件</p>
     <slot></slot>
     <p>我是子组件的内容</p>
  </div>
</template>
<script>
export default {
  name: "DetailSerod",
  data() {
    return {
   
    };
  },
  methods: {

  }
};
</script>

有时我们需要多个插槽，<slot> 元素有一个特殊的特性：name。这个特性可以用来定义额外的插槽

在向具名插槽提供内容的时候，我们可以在一个 <template> 元素上使用 v-slot 指令，并以 v-slot 的参数的形式提供其名称：

<template>
  <div>
    <p>我是父组件</p>
    <detail-serod>
      <template v-slot:cont>
        <div>
          <p>{{contant}}</p>
        </div>
      </template>
      <template v-slot:btn>
        save
      </template>
    </detail-serod>
  </div>
</template>
<script>
import DetailSerod from "./DetailSerod";
export default {
  name: "Detail",
  data() {
    return {
      contant: "来自父组件的内容"
    };
  },
  components: {
    DetailSerod
  }
};
</script>

<template>
  <div>
    <p>我是子组件</p>
   <slot name="cont"></slot>
    <p>我是子组件的内容</p>
    <button type="submit">
      <slot name="btn">btn</slot>
    </button>
     
  </div>
</template>
<script>
export default {
  name: "DetailSerod",
  data() {
    return {};
  },
  methods: {}
};
</script>

注意 v-slot 只能添加在一个 <template>

3.。。。有时想让插槽内容能够访问子组件中的数据

//父组件
 <div>
    <p>我是父组件</p>
    <detail-serod>
      <template v-slot:cont="slotProps">//v-slot:cont=""双引号中的内容随意命名，在下面要用到
        <div>
          <p>{{slotProps.user}}</p>
          <p></p>
        </div>
      </template>
      <template v-slot:btn>
        save
      </template>
    </detail-serod>
  </div>

//子组件
绑定在 <slot> 元素上的特性被称为插槽 prop。现在在父级作用域中，我们可以给 v-slot 带一个值来定义我们提供的插槽 prop 的名字：
<template>
  <div>
    <p>我是子组件</p>
   <slot name="cont" :user="user"></slot>//将user绑定到slot上在父组件中使用
    <p>我是子组件的内容</p>
    <button type="submit">
      <slot name="btn">btn</slot>
    </button>
     
  </div>
</template>
<script>
export default {
  name: "DetailSerod",
  data() {
    return {
        user:'张三'
    };
  },
  methods: {}
};
</script>

在 <template> 上使用特殊的 slot-scope 特性，可以接收传递给插槽的 prop

slot-scope 声明了被接收的 prop 对象会作为 slotProps 变量存在于 <template> 作用域中。你可以像命名 JavaScript 函数参数一样随意命名 slotProps。

<template>
  <div>
    <p>我是父组件</p>
    <detail-serod>
    
        <div slot="cont" slot-scope="slotProps">   //改变的地方
          <p>{{slotProps.user}}{{contant}}</p>
        </div>

      <template v-slot:btn>
        save
      </template>
    </detail-serod>
  </div>
</template>
<script>
import DetailSerod from "./DetailSerod";
export default {
  name: "Detail",
  data() {
    return {
      contant: "来自父组件的内容"
    };
  },
  components: {
    DetailSerod
  }
};
</script>