作用域插槽

最新推荐文章于 2024-08-16 11:12:59 发布

~小猿

最新推荐文章于 2024-08-16 11:12:59 发布

阅读量414

点赞数

分类专栏：尚硅谷电商项目文章标签：前端 javascript vue.js

本文链接：https://blog.csdn.net/qq_48113035/article/details/122415162

版权

本文介绍了如何利用Vue.js的作用域插槽在组件间进行通信。当子组件无法决定其结构和样式时，可以将数据通过作用域插槽传回父组件，由父组件定制显示。在实践中，子组件的属性如`:todo`用于标识回传的数据，而父组件则在模板中接收并处理这些数据。

摘要由CSDN通过智能技术生成

1.作用域插槽也可以进行组件间的通信，当子组件不能决定组件的结构和样式的时候，就需要将父组件传递的数据以作用域插槽的形式回传给父组件，然后由父组件决定结构和样式。

<li v-for="item in todos" :key="item.id">
    <!-- 子组件不能决定结构和样式，将每一项传递给父组件去决定 -->
    <slot :todo="item"></slot>
</li>

子组件此处的 :todo是回传的名称，并不是props。

2.父组件接收回传的数据时，需要在template标签中进行接收

<template slot-scope="scope"></template>

3.小案例

父组件

<template>
  <div>
    <h2>1.展示TODO的每一项，完成的字体颜色为绿色。未完成的字体颜色为红色</h2>
    <list :todos="todos">
      <template slot-scope="scope">
        <h3>子组件回传的数据:{
  { scope }}</h3>
        <h3 :style="{ color: scope.todo.isCompleted ?