vue项目插槽的使用

solt的使用,复制代码时注意引入的路径是否正确，组件是否注册，是否传递的数据等

简单使用

父组件

<template id='test'>
  <div class="test">
    <header v-for="info in person" :key="info.name">  
      <slot name="header"></slot>
    </header>
    <main>
      <slot></slot>
    </main>
    <footer>
      <slot name="footer"></slot>
    </footer>
  </div>
</template>
<script>
export default {
  name: "test",
  data() {
    return {};
  },
  props: {
      person:{
          type:Array
      }
  },
};
</script>
<style scoped>
.test {
  width: 100%;
  height: 200px;
  background: #ddd;
}
</style>

子组件

<template>
  <div class="about">
    <test :person="person" >
      <template v-slot:header>
        <el-button>头部按钮</el-button>
      </template>
      <template #footer> 
        <el-button>尾部按钮</el-button>
      </template>
      <template #default>中间不具名的插槽内容</template>
    </test>
  </div>
</template>
<script>
// 子组件引用父组件的template
import test from "./slot1.vue";
export default {
  name: "about",
  data() {
    return {
      persons:{
        name:'xiaohei',
        age:18
      },
      person:[{
        name:'xiaohei',
        age:18
      },{
        name:'xiaobai',
        age:20
      }]
    }
  },
  components: {
    test,
  },
};
</script>

效果

稍微复杂使用

直接看代码把

父组件

<template id='test'>
  <div class="test">
      <!-- 获取 props中 msg的值-->
    <header v-for="info in msg" :key="info.firstName">
      <slot name="header" :data="info"></slot>
    </header>
    <div>
        <!-- 父组件内调用子组件内 me的值,通过props传递-->
      <h2>{{hi}}</h2>
      <input type="text" v-model="hi.name" />
    </div>
    <footer>
      <slot name="footer" :data="bean"></slot>
    </footer>
    <main>
      <slot :data="dog"></slot>
    </main>
  </div>
</template>
<script>
export default {
  name: "test",
  data() {
    return {
      hi: this.bean,
      dog: {
        id: 1,
        name: "hashq",
        color: "strike",
      },
    };
  },

  props: {
    msg: [Object, Array],
    bean: [Object, Array],
  },

};
</script>

子组件

<template>
  <div class="about">
    <!-- test 就是父组件 父组件绑定的数据在夫组件内可以直接使用 -->
    <!-- 相当于 父组件内已经声明定义了 persons 和 me 可以直接使用-->
    <test :msg="persons" :bean="me">
      <!-- 子组件使用父组件的具名插槽 -->
      <template v-slot:header="scope">
        <p> ------------header------------------------------------</p>
        <!-- scope可以获取到每一行的数据 -->
        {{scope}}
        <el-button>{{scope.data.firstName}}</el-button>
      </template>
      <template #footer="scope">
        <p> ------------footer------------------------------------</p>
        {{scope}}
        <el-button>{{scope.data.name}}</el-button>
      </template>
      
      <!-- 具名插槽也可以通过#name的方式  -->
      <template #default="scope">
        <p> ------------default------------------------------------</p>
        <!-- 通过scope可以获取到父组件slot 绑定的数据 -->
        <h2>{{scope.data.color}}</h2>
        <h2>{{scope}}</h2>
      </template>
    </test>
  </div>
</template>


<script>
// 子组件引用父组件的template
import test from "./slot.vue";

export default {
  name: "about",
  data() {
    return {
      me: {
        name: "yxs",
        sex: "male",
        age: 22,
      },
      persons: [
        {
          firstName: "1xs",
          lastName: "y",
        },
        {
          firstName: "2xs",
          lastName: "y",
        },
        {
          firstName: "3xs",
          lastName: "y",
        },
      ],
    };
  },
  components: {
    test,
  },
};
</script>