vue组件三大核心概念图文详解

v-slot

slot

slot-scope

我们通过一个例子介绍下默认插槽、具名插槽和作用域插槽的新语法：

// 父组件
<template>
 <div class="helloSlot">
  <h2>2.6 新语法</h2>
  <SlotDemo>
   <p>默认插槽：default slot</p>
   <template v-slot:title>
    <p>具名插槽：title slot1</p>
    <p>具名插槽：title slot2</p>
   </template>
   <template v-slot:item="props">
    <p>作用域插槽：item slot-scope {{ props }}</p>
   </template>
  </SlotDemo>
 </div>
</template>
<script>
import Slot from "./slot";
export default {
 components: {
  SlotDemo: Slot
 }
};
</script>
// 子组件
<template>
 <div>
  <slot />
  <slot name="title" />
  <slot name="item" :propData="propData" />
 </div>
</template>
<script>
export default {
 data() {
  return {
   propData: {
    value: "浪里行舟"
   }
  };
 }
};
</script>

总结

以上所述是小编给大家介绍的vue组件三大核心概念图文详解,希望对大家有所帮助，如果大家有任何疑问请给我留言，小编会及时回复大家的。在此也非常感谢大家对软件开发网网站的支持！
如果你觉得本文对你有帮助，欢迎转载，烦请注明出处，谢谢！