vue插槽的简单实用

面试中经常会问到关于vue插槽的用法,其实这是我比较忽略的点,今天就简单总结一下slot的使用

插槽也可以理解为父子组件通信的一种方式,因为官方文档解释,slot就是子组件提供一个占位符<slot></slot>,用于父组件内进行内容填充,可以填充html代码或者封装的组件,然后将父组件填充的内容展示出来,不再显示<slot><slot>.马上代码示例.

//子组件
<template >
    <div>
       <h3>戎码一生何时完</h3>
       //占位符,这里会显示父组件的内容
       <slot ></slot>
    </div>
</template>

export default {
  name: "childexp",
};

//父组件:
<template >
    <div>
       <h3>填充占位符的内容</h3>
      <childexp>
          今天是4月7日...
      </childexp>
    </div>
</template>

页面会将内容 今天是4月7日...显示出来