Vue中slot插槽作用与原理详解

<template>
  <div class="slotChild">
    <h4>{{msg}}</h4>
    <slot>这是子组件插槽默认的值</slot>
  </div>
</template>
<script>
export default {
  name: "slotChild",
  data() {
    return {
      msg: "vue中的插槽---子组件"
    }
  }
}
</script>

<template>
  <div class="slotStudy">
    <h1>{{ msg }}</h1>
    <SlotChild>
      <p>这是父组件传入的值，将会替换子组件中slot中编写的默认值</p>
    </SlotChild>
  </div>
</template>
<script>
import SlotChild from "@/components/slot/SlotChild";
export default {
  name: "slotStudy",
  components: {SlotChild},
  data() {
    return {
      msg: "vue中的插槽---父组件"
    }
  }
}
</script>

    <SlotChild></SlotChild>

<template>
  <div class="slotChild">
    <h4>{{msg}}</h4>
    <h1><slot name="h_1"></slot></h1>
    <h2><slot name="h_2"></slot></h2>
    <h3><slot name="h_3"></slot></h3>
  </div>
</template>
<script>
export default {
  name: "slotChild",
  data() {
    return {
      msg: "vue中的插槽---子组件"
    }
  }
}
</script>

<template>
  <div class="slotStudy">
    <h1>{{ msg }}</h1>
    <SlotChild>
      <template v-slot:h_1>h1111111111的内容</template>
      <!--      #简写-->
      <template #h_2>h2222222的内容</template>
      <template v-slot:h_3>h33333的内容</template>
    </SlotChild>
  </div>
</template>
<script>
import SlotChild from "@/components/slot/SlotChild";
export default {
  name: "slotStudy",
  components: {SlotChild},
  data() {
    return {
      msg: "vue中的插槽---父组件"
    }
  }
}
</script>

<template>
  <div class="slotChild">
    <h4>{{ msg }}</h4>
    <h1>
      <slot :str="strDate" name="n_str">{{ strDate.name }}</slot>
    </h1>
    <h2>
      <slot :str="strDate" name="j_str">{{ strDate.job }}</slot>
    </h2>
  </div>
</template>
<script>
export default {
  name: "slotChild",
  data() {
    return {
      msg: "vue中的插槽---子组件",
      strDate: {
        name: "学习前端的小方同学",
        job: "找工作中",
        age:"我每年都是18"
      }
    }
  }
}
</script>

<template>
  <div class="slotStudy">
    <h1>{{ msg }}</h1>
    <SlotChild>
      <template #n_str="strProps">
        {{ strProps.str.job }}
      </template>
      <template v-slot:j_str="strProps">
        {{ strProps.str.age }}
      </template>
    </SlotChild>
  </div>
</template>
<script>
import SlotChild from "@/components/slot/SlotChild";
export default {
  name: "slotStudy",
  components: {SlotChild},
  data() {
    return {
      msg: "vue中的插槽---父组件"
    }
  }
}
</script>