从0开始探究vue-组件化-组件之间传值

理解 Vue中有个非常重要的核心思想，就是组件化，组件化是为了代码复用 什么是组件化 组件化，就像一个电脑主机里的主板，有内存条的插口，有硬盘，光驱等等的插口，我们的项目，就像一个电脑主机，通过各种组件化的模块（硬盘、内存等），来拼合成一个完整的电脑。 如图，每一个块都是一个组件，由许许多多的组件拼合而成，可以无限的嵌套下去 组件化的好处 模块复用，提高效率，让重复的代码只写一遍。 预留个性化设置，可以保证模块，既通用，又可变。 提高可维护性，如果一个项目多个页面使用了同一个组件（例如消息弹框），如果修改弹框样式，只需要修改这个模块即可。 写法 cli模式 组件部分 export def Vue.js 是一款流行的前端框架，其核心思想之一是组件化。组件化允许我们将复杂的用户界面拆分为可重用的、独立的部分，就像电脑主机由不同的硬件组件组成一样。每个组件都可以有自己的逻辑和视图，可以单独开发、测试和维护，然后组合在一起形成整个应用程序。 在 Vue 中创建组件的基本步骤如下： 1. 定义组件：通常在 CLI 模式下，我们可以创建一个 Vue 组件文件，如 `alert.vue`，并在其中定义组件的属性、数据和方法。例如： ```javascript export default { name: "myAlert", // 其他组件配置 } ``` 2. 注册和使用组件：在其他 Vue 实例中，我们需要导入组件并将其注册到 `components` 对象中，以便在模板中使用。 ```javascript import myAlert from '@/components/alert.vue'; export default { components: { myAlert } }; ``` 组件之间的通信是 Vue 开发中的重要部分，有多种方式实现： 1. **父组件向子组件传递值**：通过 `props`。子组件声明需要接收的 `props`，父组件通过模板中的属性将值传入子组件。 ```javascript // 子组件 export default { props: ['message'] }; // 父组件 <my-alert message="这是一个弹框"></my-alert> ``` 2. **父组件通过 `$refs` 访问子组件**：父组件可以通过 `this.$refs` 直接访问子组件实例，然后修改子组件的属性或调用其方法。 ```javascript // 子组件 export default { methods: { doSomething() {} } }; // 父组件 this.$refs.myAlert.doSomething(); ``` 但要注意，直接修改 `$refs` 中的属性不是响应式的，应尽量避免。 3. **子组件向父组件传递值**：通过 `$emit` 触发自定义事件。子组件使用 `this.$emit` 发送事件，父组件通过监听该事件接收值。 ```javascript // 子组件 <button @click="$emit('confirmed')">确定</button> // 父组件 <my-alert @confirmed="handleConfirm"></my-alert> methods: { handleConfirm() { console.log('确认操作'); } } ``` 4. **兄弟组件间通信**：通常借助公共父组件作为中介，通过 `$parent` 或 `$root` 实现。也可以使用 `provide` 和 `inject` API 进行跨层级的数据传递。 5. **全局变量和方法**：在 `main.js` 中，我们可以通过 Vue 原型挂载全局变量和方法，但这可能导致全局污染，应谨慎使用。 ```javascript Vue.prototype.$globalData = {}; Vue.prototype.$sayName = function(e) { console.log(e); }; ``` 6. **Vuex**：对于复杂应用，推荐使用 Vuex 管理全局状态，提供集中式存储和统一的修改方式，确保数据的一致性和响应性。 组件化是 Vue.js 的核心优势，它极大地提高了代码的复用性和可维护性。理解并熟练运用组件通信方法是提升 Vue 开发能力的关键。在实际项目中，根据需求选择合适的方式来传递数据，能够帮助构建高效、易于维护的应用程序。