Vue组件的props和事件在实际开发中如何使用？请举一个具体的交互场景。

在Vue中，组件的props和事件是父子组件之间通信的主要方式。props允许父组件向子组件传递数据，而事件则允许子组件向父组件发送消息。下面是一个具体的交互场景，展示了如何在实际开发中使用props和事件。

文末有我帮助400多位同学成功领取到前端offer的面试综合题哦，包含了工程化，场景题，八股文，简历模板，等等

场景描述

假设我们有一个简单的购物应用，其中有一个商品列表组件（ProductList）和一个商品详情组件（ProductDetail）。ProductList组件显示所有商品的列表，而ProductDetail组件则显示选中商品的详细信息。

组件设计

ProductList 组件
1. 接收一个products prop，它是一个包含所有商品数据的数组。
2. 当用户点击某个商品时，会触发一个自定义事件（如product-selected），并将被选中商品的ID作为参数传递。
ProductDetail 组件
1. 接收一个selectedProductId prop，它表示当前要显示的商品的ID。
2. 根据selectedProductId从ProductList组件传递的products数组中查找并显示对应的商品详情。

代码

ProductList 组件

<template>
  <div>
    <ul>
      <li v-for="product in products" :key="product.id" @click="selectProduct(product.id)">
        {{ product.name }}
      </li>
    </ul>
  </div>
</template>

<script>
export default {
  props: {
    products: {
      type: Array,
      required: true,
    },
  },
  methods: {
    selectProduct(id) {
      this.$emit('product-selected', id);
    },
  },
};
</script>

ProductDetail 组件

<template>
  <div>
    <h2>{{ selectedProduct.name }}</h2>
    <p>{{ selectedProduct.description }}</p>
    <!-- 其他商品详情 -->
  </div>
</template>

<script>
export default {
  props: {
    products: {
      type: Array,
      required: true,
    },
    selectedProductId: {
      type: [Number, String],
      required: true,
    },
  },
  computed: {
    selectedProduct() {
      return this.products.find(product => product.id === this.selectedProductId);
    },
  },
};
</script>

父组件（使用ProductList和ProductDetail）

<template>
  <div>
    <ProductList :products="products" @product-selected="onProductSelected" />
    <ProductDetail :products="products" :selectedProductId="selectedProductId" />
  </div>
</template>

<script>
import ProductList from './ProductList.vue';
import ProductDetail from './ProductDetail.vue';

export default {
  components: {
    ProductList,
    ProductDetail,
  },
  data() {
    return {
      products: [
        /* ... 商品数据 ... */
      ],
      selectedProductId: null,
    };
  },
  methods: {
    onProductSelected(id) {
      this.selectedProductId = id;
    },
  },
};
</script>

在这个场景中，当用户点击ProductList组件中的某个商品时，selectProduct方法会被触发，并通过$emit方法发送一个product-selected事件，携带被选中商品的ID。父组件监听到这个事件后，会调用onProductSelected方法，并更新selectedProductId的值。由于ProductDetail组件的selectedProductId prop 是响应式的，所以当它的值发生变化时，组件会自动重新渲染，显示新的商品详情。
堪称2024最强的前端面试场景题，已帮助432人成功拿到offer

在这里插入图片描述