vue插槽详解

vue插槽功能
我理解的话 其实是 在子组件里面 渲染父组件的东西
子组件slot用name声明插槽名,父组件里面用slot=name名来选择在哪个插槽插入,这个是具名插槽,
假如只放了一个slot,没有规定它的名字,这种叫匿名插槽,父组件里面如果插入多个节点标签(div,p,span这些),没有用slot声明的情况下,匿名插槽会把这些都渲染出来.

还有一个最重要的是 作用域插槽,它用来控制子组件到父组件的数据流动,
具体用法理解:
因为子组件的数据父组件直接访问的话是访问不到的,那么就用类似父子组件传值里面的方法来传递,仅仅是相似,但两者是不一样的.

父组件:

<template>
  <div class="home">
    <childSlot>
      //user是父组件的数据
      <div>匿名插槽3</div>
      <div>
        <p>匿名插槽1</p>
        <p>匿名插槽2</p>
      </div>
      <span>sp</span>
      <p slot="one" slot-scope="slotProps">{{ user }} -- {{ slotProps }}</p>
      //用slotProps可以获取到子组件传递的属性
    </childSlot>
  </div>
</template>

<script>
import childSlot from "../components/childSlot.vue";

export default {
  name: "Home",
  components: {
    // HelloWorld
    childSlot,
  },
  data() {
    return {
      user: "nan",
    };
  },
};
</script>

<template>
    <div>
       <slot></slot>
        <slot name="one" :url='url' :xyz='age'>
            
        </slot>
        
    </div>
</template>

<script>
    export default {
        data(){
            return {
                url:'https://baidu.com',
                age:20
            }
        }
    }
</script>

<style lang="stylus" scoped>

</style>