vue学习笔记 学习笔记

vue学习笔记 Vue.js 是一个流行的前端JavaScript框架，用于构建用户界面。这篇学习笔记主要涵盖了Vue的核心概念，包括组件通信、非父子组件间通信以及路由管理和状态管理。 ### 父子组件通信 #### 1) Props和`$emit` **Props** 是Vue中父组件向子组件传递数据的主要方式。在父组件中定义prop属性，然后在子组件中通过props选项接收这些值。例如，父组件可以这样传递数据： ```html <child-component :parent-data="someData"></child-component> ``` 子组件中接收并使用`parentData`： ```javascript export default { props: ['parentData'], // ... } ``` 子组件通过触发事件 (`$emit`) 向父组件发送数据。例如，当用户点击一个按钮时，子组件可能触发一个自定义事件： ```javascript this.$emit('custom-event', data); ``` 父组件可以监听这个事件： ```html <child-component @custom-event="handleCustomEvent"></child-component> ``` ```javascript methods: { handleCustomEvent(data) { // 处理数据 } } ``` #### 2) `$parent` 和 `$children` `$parent` 和 `$children` 属性允许直接访问到父组件或子组件实例，但通常不推荐直接使用，因为这会使得代码耦合度增加，不易维护。 #### 3) `$refs` `$refs` 可用于获取组件实例，尤其在需要对组件进行操作或访问组件内部方法时。在模板中，通过`ref`属性为组件创建引用： ```html <child-component ref="myChild"></child-component> ``` 然后在父组件的方法中可以访问到这个引用： ```javascript this.$refs.myChild.someMethod(); ``` ### 非父子组件通信 #### 1) 消息总线 (Event Bus) 创建一个独立的Vue实例作为事件中心，用来广播和监听事件，实现非父子组件间的通信： ```javascript // eventBus.js import Vue from 'vue'; export const EventBus = new Vue(); // 在组件中使用 import { EventBus } from './eventBus'; // 发布事件 EventBus.$emit('event-name', data); // 监听事件 EventBus.$on('event-name', (receivedData) => { // 处理数据 }); ``` #### 2) `$attrs` 和 `$listeners` `$attrs` 包含父组件传递的所有未被子组件声明为prop的属性，而`$listeners`则包含了父组件的事件监听器。这常用于第三方组件库，让它们能响应父组件的事件。 ```javascript // 子组件 export default { inheritAttrs: false, // 阻止默认行为 computed: { customAttrs() { return {...this.$attrs, ...{customProp: 'customValue'}}; // 自定义属性 }, customListeners() { return {...this.$listeners, customEvent: this.handleCustomEvent}; // 自定义事件监听 } }, methods: { handleCustomEvent(data) { // 处理自定义事件 } }, render(h) { return h('div', { attrs: this.customAttrs, on: this.customListeners }); } } ``` #### 3) Vuex Vuex 是一个专为Vue.js应用程序开发的状态管理模式。它采用集中式存储管理应用的所有组件的状态，并以相应的规则保证状态以一种可预测的方式发生变化。在大型项目中，使用Vuex管理共享状态是非常常见的。 ### Vue Router Vue Router 是Vue.js官方的路由管理器，它让我们能够实现单页面应用的路由功能。 #### 1) 路由跳转 (`router-link`) `router-link` 组件用于创建导航链接，它的`to`属性定义了链接的目标： ```html <router-link to="/about">About</router-link> ``` #### 2) 动态路由 动态路由允许我们创建具有动态参数的路径，如`/users/:userId`。在组件中，可以通过`this.$route.params`访问这些参数。 #### 3) 嵌套路由 嵌套路由允许在一个路由下嵌套其他路由，形成路由树。在路由配置中，可以使用`children`数组来定义嵌套路由。 #### 4) 导航守卫 导航守卫提供了一种在路由切换前或后执行逻辑的机制，如检查登录状态、防止非法访问等。例如，全局前置守卫： ```javascript router.beforeEach((to, from, next) => { if (!store.getters.isLoggedIn) { next('/login'); } else { next(); } }); ``` ### Axios 全局配置 Axios 是一个基于 promise 的 HTTP 库，可用于处理HTTP请求。可以通过设置全局配置影响所有的请求： ```javascript axios.defaults.baseURL = 'https://api.example.com'; axios.defaults.headers.common['Authorization'] = 'Bearer ' + localStorage.getItem('token'); axios.interceptors.request.use(config => { // 在发送请求之前做些什么 return config; }, error => { // 对请求错误做些什么 return Promise.reject(error); }); ``` 以上是Vue.js学习笔记的主要内容，涵盖了Vue中的关键概念，帮助你更好地理解和掌握Vue的开发实践。