vue组件插槽(vue插槽是什么意思)

导语：简单聊一下vue组件中的插槽

1.具名组件 我们一个组件里需要多个插槽,就需要用到slot的name属性

<!--子组件定义--><div>  <header>    <slot name=></slot>  </header>    <main>    <slot></slot>  </main>    <footer>    <slot name=></slot>  </footer></div><!--父组件--><div>   <template v-slot:header>    <h1>Here might be a page title</h1>   </template>  <p>A paragraph for the main content.</p>  <p>And another one.</p>  <template v-slot:footer>    <p>Here some contact info</p>  </template></div>

2.作用域组件

自 2.6.0 起有所更新。已废弃的使用 slot-scope attribute 的语法在这里 有时让插槽内容能够访问子组件中才有的数据是很有用的

//父组件使用子组件的值<current-user>  <template v-slot:default=>    {{ slotProps.user.firstName }}  </template></current-user//子组件向父组件传递值<span>  <slot v-bind:user=>    {{ user.lastName }}  </slot></span>

案例

子组件定义插槽

<template>  <div>      <!--具名插槽-->      <slot name=/>      <!--作用域插槽 向父组件传递值-->      <slot name= v-bind=&39;vue />  </div></template><script>export default {    name:}</script><style></style>

父组件使用子组件插槽

<template><div id=>   {{msg}}   <Solt>      <template v-slot:title>         <h1>这段内容会填充到子组件中</h1>      </template>      <!--使用props来接收{value:&39;}值-->      <template v-slot:item=>          <p>======={{props}}</p>      </template>   </Solt>  </div></template><script>//导入子组件import Solt from &39;export default {  name: &39;,  data() {        return {            msg: ,            name:,            type:,            list:[&39;,&39;],            view:true        }    },    methods: {          },  components: {    Solt //必须要定义子组件  }}</script><style>2c3e50;  margin-top: 60px;}</style>

本文内容由小涵整理编辑！