父子组件通信与SearchSelector参数传递：组件间面包屑操作详解

在尚硅谷电商项目尚品汇笔记2中，主要探讨了组件间的通信机制，特别是在Vue框架下实现高效且灵活的组件交互。笔记详细介绍了四种不同的组件通信方式： 1. **父子组件通信**： - **自定义事件($on、$emit)**：通过在子组件中触发`$emit`发送一个自定义事件，然后在父组件上使用`$on`监听这个事件，实现子组件向父组件传递信息。同时，通过`props`属性，父组件可以将数据向下传递给子组件。 2. **全局事件总线($bus)**：在复杂的多层级组件间，使用全局事件总线（如Vuex的actions、mutations或自定义的中央事件管理器）作为媒介，使得组件间能进行跨层级通信。 3. **Vuex**：状态管理模式，用于管理应用的所有组件共享的状态。当子组件需要改变状态时，通过actions派发 mutation，更新store中的状态，所有订阅该mutation的组件都会接收到通知并更新视图。 4. **插槽(Slots)**：这是一种用于在组件间传递内容的方式，尤其适用于父子组件之间的动态数据传递，通过`slot`标签，子组件可以将内容插入到父组件指定的位置。 此外，笔记还聚焦于`SearchSelector`子组件的传参和面包屑功能。通过`query`和`params`参数生成面包屑，并在用户操作（如删除）时更新组件内部状态，但不直接影响地址栏URL，因为URL的变化通常由路由决定，而query和params的变动会导致路由路径相应更新。 在面包屑生成逻辑中，关键在于检查`searchParams`中的属性是否存在，只有当这些属性存在时才会显示相应的面包屑。删除逻辑则涉及`Search.vue.js`文件中的代码，可能包括对`SearchSelector`组件实例的交互和Vuex状态的处理。 在实际操作中，字符串拼接使用了模板字符串（`${}`）语法，这在JavaScript中是便捷且易读的字符串格式化方式，如例子所示： ```js let a = 1; console.log(`a的值是：${a}`); // 输出：a的值是：1 ``` 这部分内容深入讲解了Vue组件间的通信机制和面包屑功能在实际开发中的应用场景，强调了如何利用Vue的特性来组织和管理组件间的交互，确保应用的可维护性和灵活性。