Vue组件交互：props与$emit实战解析

“Vue 自定义组件的写法与用法详解，包括如何通过props进行父子组件间的传值，以及使用$emit实现子组件调用父组件的方法。” Vue.js 是一款流行的前端框架，它允许开发者通过组件化的方式构建应用程序。在 Vue 中，自定义组件是构建复用性代码的核心手段。下面我们将详细探讨如何编写和使用自定义组件。 ### 1. 创建自定义组件 在 Vue 项目中，通常将组件文件放在 `components` 目录下。例如，创建一个名为 `MyComponent.vue` 的文件，结构如下： ```html <template> <!-- 组件模板 --> </template> <script> export default { name: 'MyComponent', props: { /* 定义接收的属性 */ }, data() { /* 定义组件内部数据 */ }, methods: { /* 定义组件方法 */ }, // 其他选项... } </script> <style scoped> /* 组件样式 */ </style> ``` ### 2. 使用 props 进行父子组件传值 props 是 Vue 中一种父组件向子组件传递数据的方式。在子组件的 `props` 对象中定义接收的属性，父组件可以通过模板中的绑定属性将值传递给子组件。例如： ```html <!-- 父组件模板 --> <MyComponent :customProp="parentValue"></MyComponent> <!-- 子组件定义 --> props: { customProp: String // 接收字符串类型的 customProp 属性 } ``` 这样，`parentValue` 的值就会被传递到子组件的 `customProp` 属性中。 ### 3. 使用 $emit 实现子组件调用父组件的方法 子组件通过 `$emit` 事件来通知父组件执行某些操作。在子组件中，当某个操作完成后，可以触发自定义事件并携带数据： ```javascript // 子组件方法 methods: { someAction() { this.$emit('custom-event', eventData); } } ``` 然后在父组件中监听这个事件并处理： ```html <!-- 父组件模板 --> <MyComponent @custom-event="handleCustomEvent"></MyComponent> <script> export default { methods: { handleCustomEvent(eventData) { // 处理事件，eventData 是子组件传递的数据 } } } </script> ``` ### 示例解析 在给定的 `index.vue` 文件中，我们看到一个名为 `cusdealed` 的自定义组件。它包含三个状态 `showStatus` 分别为 1、2、3 的 `submited` 子元素，根据 `showStatus` 的值展示不同的提示信息。组件使用了 `v-if` 指令来决定每个状态的可见性，并通过 `img` 标签显示不同状态的图标，以及包含相应提示信息的 `div`。 `<script type="text/javascript" src="./logic.js"></script>` 表示该组件可能依赖于外部的 JavaScript 文件 `logic.js` 来处理业务逻辑，例如改变 `showStatus` 的值。而 `style` 标签则定义了组件的局部样式，使用 `@import` 导入了外部的 CSS 文件。 总结来说，Vue 自定义组件的写法和用法主要涉及组件的创建、props 的定义和使用，以及通过 `$emit` 进行通信。通过这种方式，开发者可以构建出清晰、模块化的应用程序。