vue3组件 setup

### Vue3 Setup 语法下的组件通信方式 #### props 和 emit `props` 是一种单向的数据流，用于父组件给子组件传递数据。而在 `setup` 函数中可以通过参数来接收 `props` 对象。 ```javascript // 子组件 Child.vue 中使用 setup 接收 props <script> import { defineComponent } from 'vue'; export default defineComponent({ props: { message: String, }, setup(props) { console.log(props.message); // 输出来自父级的消息 return {}; } }); </script> ``` 对于自定义事件，在 `setup` 下可以利用第二个参数中的 `emit` 来触发事件通知父组件[^1]。 ```javascript // 子组件内部调用 emit 发送消息到父组件 <button @click="() => emit('childEvent', 'some data')">Click me!</button> ``` #### provide / inject 通过 `provide` 和 `inject` 可以让祖先组件向下层多个后代组件提供依赖关系，这在大型应用里特别有用当存在多层级嵌套时[^3]。 ```javascript // 父组件 Parent.vue 提供属性 <template> <Child /> </template> <script> import { provide, ref } from 'vue'; export default { name: "Parent", setup() { const parentMessage = ref("Hello from parent"); provide('message', parentMessage); return {}; } }; </script> ``` ```javascript // 后代组件 GrandChild.vue 注入并使用该属性 <script> import { inject } from 'vue'; export default { name: "GrandChild", setup() { const injectedMessage = inject('message'); console.log(injectedMessage.value); // Hello from parent return {}; } } </script> ``` #### 使用 Pinia 进行状态管理 Pinia 是官方推荐的状态管理模式之一，它简化了 Vuex 的 API 设计使得更易于理解和上手。开发者可以在 store 文件夹下创建仓库文件，并导出相应的 getter/setter 方法以便于其他模块引入操作全局变量。 ```bash npm install pinia ``` ```javascript // 创建 Store 实例 import { createPinia, defineStore } from 'pinia' const pinia = createPinia() // 定义 counter 店铺逻辑 export const useCounterStore = defineStore('counter', { state: () => ({ count: 0 }), actions: { increment() { this.count++ } } }) ``` ```javascript // 在 main.js 或者 app.ts 中挂载至根实例 app.use(pinia) // 组件内使用 import { useCounterStore } from './stores/counter' function setup() { const counter = useCounterStore() function handleClickIncrementButton(){ counter.increment(); } return { handleIncrementButtonClick }; } ``` #### 插槽 (Slot) Vue3 支持三种类型的插槽：默认插槽、命名插槽以及作用域插槽。它们允许父组件向子组件模板插入内容或者访问子组件内的局部变量。 ```html <!-- 父组件 --> <MyComponent> <!-- 默认插槽 --> <p>这里是默认的内容。</p> <!-- 命名插槽 --> <template v-slot:title> <h2>这是标题</h2> </template> <!-- 作用域插槽 --> <template v-slot:item="{ item }"> {{ item }} </template> </MyComponent> ``` ```html <!-- 子组件 MyComponent.vue --> <div class="my-component"> <header><slot name="title"/></header> <main><slot/></main> <footer><ul><li v-for="(item,index) in items"><slot :name="'item'" :item="item"></slot></li></ul></footer> </div> ```

在Vue3中，组件的setup函数是一个新的选项，它被用来代替Vue2中的created和mounted钩子函数。setup函数在组件实例创建之前被调用，它接收两个参数：props和context。 当组件的props发生变化时，setup函数会重新执行。这意味着，如果你想在组件的props更新时执行某些逻辑，你可以在setup函数中使用watchEffect函数来监听props的变化。 另外，Vue3还引入了一个新的函数useContext，它可以让你在组件中访问全局的Vue上下文对象。这个上下文对象包含了一些全局的API，例如：$emit、$refs、$nextTick等等。 总的来说，Vue3的setup函数让组件的逻辑更加清晰和简洁，同时也提高了组件的性能。