Vue组件进阶:Props、Emit、Slots，玩转组件交互的精髓!

哈喽，各位前端攻城狮们！组件化开发是现代前端的基石，而Vue作为一款优秀的组件化框架，其组件的灵活运用至关重要。今天，我们就来深入探讨 Vue 组件的高级用法，包括 props、emit 和 slots，让你彻底掌握组件间的交互，打造可复用、易维护的前端应用！

组件的基石：Props

Props（属性）是父组件向子组件传递数据的桥梁。通过 props，我们可以将父组件的状态传递给子组件，从而实现数据的单向流动。

基本用法：

<!-- 父组件 Parent.vue -->
<template>
  <Child :message="parentMessage" />
</template>

<script>
import Child from './Child.vue';
export default {
  components: { Child },
  data() {
    return {
      parentMessage: 'Hello from Parent!'
    }
  }
};
</script>

<!-- 子组件 Child.vue -->
<template>
  <p>{{ message }}</p>
</template>

<script>
export default {
  props: ['message']
};
</script>

代码解读：

• 在父组件中，通过 :message="parentMessage" 将 parentMessage 的值传递给子组件的 message prop。
• 在子组件中，通过 props: ['message'] 声明接收一个名为 message 的 prop。

Props 的类型校验：

为了保证数据的可靠性，我们可以对 props 进行类型校验：

<script>
export default {
  props: {
    message: String,
    count: {
      type: Number,
      required: true, // 必须传入
      default: 0 // 默认值
    },
    options: {
      type: Array,
      validator(value) { // 自定义校验器
        return value.every(item => typeof item === 'string');
      }
    }
  }
};
</script>

content_copyUse code with caution.Vue

Props 的总结：

• Props 是父组件向子组件传递数据的单向通道。
• 可以进行类型校验、设置默认值和自定义校验器，保证数据的可靠性。
• Props 是不可修改的，子组件只能读取 props 的值，不能直接修改它。

组件的“发声器”：Emit

Emit（发射）是子组件向父组件传递事件和数据的桥梁。当子组件内部发生了一些变化，需要通知父组件时，就可以使用 emit。

基本用法：

<!-- 子组件 Button.vue -->
<template>
  <button @click="handleClick">Click Me</button>
</template>

<script>
export default {
  methods: {
    handleClick() {
      this.$emit('button-click', 'button clicked!'); // 发射一个 'button-click' 事件
    }
  }
};
</script>

<!-- 父组件 Parent.vue -->
<template>
  <Button @button-click="handleButtonClick" />
  <p>{{ message }}</p>
</template>

<script>
import Button from './Button.vue';
export default {
  components: { Button },
  data() {
    return {
      message: ''
    }
  },
  methods: {
    handleButtonClick(msg) {
      this.message = msg; // 接收子组件传来的数据
    }
  }
};
</script>

代码解读：

• 在子组件中，通过 this.$emit('button-click', 'button clicked!') 发射一个名为 button-click 的事件，并传递数据 "button clicked!"。
• 在父组件中，通过 @button-click="handleButtonClick" 监听 button-click 事件，并执行 handleButtonClick 方法。

Emit 的总结：

• Emit 是子组件向父组件传递事件和数据的通道。
• 可以通过 $emit 发射事件，并通过 @ 监听事件。
• 可以传递任意类型的数据。

组件的“插槽”：Slots

Slots（插槽）是Vue组件内容分发的强大工具。通过 slots，我们可以让父组件更加灵活地控制子组件的内容，实现更强大的组件复用。

默认插槽：

<!-- 子组件 Card.vue -->
<template>
  <div class="card">
    <div class="header">
      <slot name="header"></slot>
    </div>
    <div class="content">
      <slot></slot>
    </div>
    <div class="footer">
       <slot name="footer"></slot>
    </div>
  </div>
</template>

<!-- 父组件 Parent.vue -->
<template>
  <Card>
    <template #header>
        <h2>Card Header</h2>
    </template>
    <p>This is card content.</p>
    <template #footer>
        <span>Card Footer</span>
    </template>
  </Card>
</template>

<script>
import Card from './Card.vue';
export default {
  components: { Card }
};
</script>

代码解读：

• 在子组件中，使用 <slot></slot> 定义插槽的位置。如果子组件定义了 name 属性，父组件用 v-slot:name 或者 #name来绑定插槽，否则父组件所有子节点会被添加到子组件的默认插槽
• 在父组件中，将需要插入到插槽中的内容包裹在 <template v-slot:default>中，或者直接写在 <Card></Card> 标签之间。

具名插槽：

上面的示例中使用了具名插槽，通过 name 来区分插槽。

作用域插槽：

作用域插槽可以让父组件访问子组件的数据。

<!-- 子组件 List.vue -->
<template>
  <ul>
    <li v-for="item in list" :key="item">
      <slot :item="item">{{ item }}</slot>
    </li>
  </ul>
</template>

<script>
export default {
  data() {
    return {
      list: ['Item 1', 'Item 2', 'Item 3']
    };
  }
};
</script>

<!-- 父组件 Parent.vue -->
<template>
  <List>
    <template v-slot="{ item }">
      <span style="color: red">{{ item }}</span>
    </template>
  </List>
</template>

<script>
import List from './List.vue';
export default {
  components: { List }
};
</script>

代码解读：

• 在子组件中，通过 <slot :item="item">{{ item }}</slot> 将 item 数据传递给父组件的插槽。
• 在父组件中，通过 v-slot="{ item }" 接收子组件传递的数据，并可以进行自定义渲染。

Slots 的总结：

• Slots 可以让父组件灵活控制子组件的内容。
• 默认插槽用于插入默认内容。
• 具名插槽可以插入到特定的位置。
• 作用域插槽可以让父组件访问子组件的数据。

总结：

通过 props、emit 和 slots，我们可以实现 Vue 组件之间灵活、高效的交互，构建可复用、易维护的前端应用。掌握这些高级用法，你就可以像搭积木一样，构建出复杂而强大的用户界面。

结尾：

希望这篇文章能帮助你更好地理解 Vue 组件的高级用法。如果你觉得这篇文章对你有帮助，请点赞、评论、收藏，也欢迎分享给你的朋友们。让我们一起在前端的道路上越走越远！