Vue组件传值与插槽用法详解

"Vue组件传值和插槽使用详解" 在Vue.js中，组件是构建可复用、可组合的应用程序的基础。本笔记主要探讨了Vue组件间的四种主要通信方式：父传子、子传父、中央事件总线以及插槽的使用。 ## 1. 父传子 在Vue中，父组件可以通过`props`向子组件传递数据。在父组件模板中，我们以自定义属性的形式将数据绑定到子组件。例如： ```vue <子组件参数1="值1"参数2="值2" :参数3="表达式"></子组件> ``` 在子组件中，我们需要声明这些`props`并指定其类型和默认值： ```javascript props: { 参数1: { type: Number, default: 0 }, 参数2: String, 参数3: Function } ``` 这样，子组件就可以通过`props`访问并使用父组件传递过来的数据。 ## 2. 子传父 子组件想要将数据传递回父组件，通常通过触发自定义事件来实现。在子组件中，使用`$emit`触发事件，并传递数据： ```javascript this.$emit('自定义事件类型名', 回传的参数); ``` 然后在父组件中监听这个事件，并提供一个方法处理传递回来的数据： ```vue <子组件 @自定义事件类型名="事件执行函数名"></子组件> ``` 在父组件的方法中接收数据： ```javascript methods: { 事件执行函数(data) { // data 即为子组件回传的数据 } } ``` ## 3. 中央事件总线 ($bus) 当组件层级较深，或者非父子关系的组件需要通信时，可以使用“中央事件总线”（$bus）。首先在全局（如`main.js`）中创建一个Vue实例作为事件总线： ```javascript Vue.prototype.$bus = new Vue(); ``` 之后，组件中可以使用`$bus`来发送和接收事件： ```javascript // 发送事件 this.$bus.$emit('自定义事件类型名', 传入的参数); // 接收事件 this.$bus.$on('自定义事件类型名', (data) => { // data 即为传入的参数 }); ``` ## 4. Vue插槽 (slot) 插槽是Vue中用于组件内容分发的机制，允许父组件在子组件内部注入内容。 ### 4.1 匿名插槽 最基本的插槽类型，子组件内部定义一个默认插槽，父组件可以直接将内容放入子组件中替换该插槽： ```vue <!-- 父组件 --> <子组件> # 这里写入替换slot插槽的html代码 </子组件> <!-- 子组件 --> <template> <div> <!-- 默认插槽 --> <slot></slot> </div> </template> ``` ### 4.2 具名插槽 具名插槽允许子组件定义多个插槽，每个插槽有特定的名称，父组件可以通过`slot`属性指定内容应插入哪个插槽： ```vue <!-- 父组件 --> <子组件> <h1 slot="header">标题</h1> <p slot="content">内容</p> </子组件> <!-- 子组件 --> <template> <div> <header> <slot name="header"></slot> </header> <main> <slot name="content"></slot> </main> </div> </template> ``` ### 4.3 作用域插槽 作用域插槽允许子组件传递数据给父组件，让父组件决定如何渲染这部分内容。使用`v-slot`指令，可以访问到子组件提供的数据： ```vue <!-- 父组件 --> <子组件> <template v-slot:customSlot="{ item }"> {{ item.title }} </template> </子组件> <!-- 子组件 --> <template> <ul> <li v-for="item in items" v-slot:customSlot="slotProps"> <!-- 提供数据给父组件 --> </li> </ul> </template> <script> export default { data() { return { items: [{ title: '标题1' }, { title: '标题2' }] }; } }; </script> ``` 在这个例子中，`{ item }`作为`v-slot`的参数，允许父组件访问到`items`数组中的每个元素。 总结，Vue组件的传值和插槽使用是实现组件间数据流动和内容注入的关键技术，它们极大地提高了代码的复用性和可维护性。熟练掌握这些概念和用法，能够帮助开发者更好地构建复杂的Vue应用。