Vue知识和相关案例

码龄3年

关注

原创最新推荐文章于 2026-08-23 23:33:20 发布 1.6k 阅读 GEO检测

Java判断地图坐标(经度,纬度)是否在多边形区域或圆形区域内欢迎光临我的博客查看最新文章:在地图上，可以使用经纬度确定一个位置，如上海体育场(121.449391,31.188228)，如果知道了2个地点的经纬度，我们就能在地图上找到其位置及2点的距离，百度地图或高德地图提供了相应的服务；如果将多个坐标点连成多边形区域，如何判断某个坐标点是否在多边形区域内，如下工具类。阅读详情

Vue组件:

概述：组件是Vue.js最强大的功能之一，组件可以扩展HTML元素，也可以封装可重用的代码，组件系统让开发人员可以用独立可复用的小组件来构建大型应用。

组件的出现，能够让开发人员以不同的组件，来划分不同的功能模块，将来需要什么样的功能，去调用对应的组件即可。

为什么使用组件

1、方便重复使用

2、减少代码重复冗余

3、便于多人协同开发

4、有助于提高开发效率

5、提升整个项目的可维护性

Tip:通常，代码中一些没有见过的自定义标签，如<my-component>等，就是组件。每一个标签代表一个组件，组件一旦注册成功，就可以复用，可以在很多需要的地方直接使用即可。

举例，比如 element和Vant 就是两个典型的提供了很多内置组件的UI框架。

组件的使用步骤:

1、在components 文件夹新建组件页面

2、在需要此组件的页面调用组件

组件之间的通信

组件是是Vue.js中最强大的功能之一。组件实例的作用域是相互独立的，这就意味着不同组件之间的数据是无法共享的。一般组件之间的关系如图所示。

A和B，B和C、B和D都是父子关系，C和D是兄弟关系，A和C、A和D是隔代关系（可能隔多代）。

组件通信时，根据组件之间的关系的不同，有着不同的通信方式。一般通信分为3种情况：父组件向子组件通信、子组件向父组件通信、非父子组件之间的通信。针对不同的场景，需要使用不同的通信方式。

1、父组件向子组件传递数据，需要props属性来实现。

2、子组件向父组件传值，需要用到自定义事件，整个通信的过程为：

2.1、子组件使用this.$emit('事件名','需要传输的数据')来触发事件，父组件使用$on()来监听子组件的事件。

父组件向子组件传值通过props实现，反过来子组件向父组件传值需要通过$emit()方法向父组件暴露一个事件，然后父组件在处理这个事件的方法中获取子组件传过来的数据。

主要步骤：

① 在子组件中通过$emit向父组件暴露一个事件。

② 在父组件中处理子组件暴露出来的事件，并接收子组件传过来的值。

下面是一个案例：

在 Vue 中，组件通信是非常重要的一个话题。因为在实际的应用中，我们通常需要将多个组件组合起来构建出完整的应用程序。

Vue 提供了多种方式来实现组件之间的通信，包括 props、事件、emit、emit、parent/children、children、refs 等。以下是这些方式的简单介绍：

1. props

props 是将数据从父组件传递到子组件的一种方式。通过在子组件中声明 props 属性，可以定义所需接收的数据类型和默认值，然后将数据通过父组件的属性传递进来。

在上述代码中，我们创建了一个名为 "my-component" 的子组件，并将父组件中的 "hello" 数据作为 props 传递了进去。在子组件中，我们使用双花括号语法来引用 props 中的数据。

2. 事件

在 Vue 中，组件可以通过 $emit 方法触发自定义事件，并将数据传递给父组件。父组件可以通过 v-on 指令监听这些事件，并在事件处理函数中获取传递的数据。

在上述代码中，我们创建了一个名为 "my-component" 的子组件，并在点击按钮时触发了 "message" 事件，并将数据 "Hello, world!" 传递给父组件。在父组件中，我们使用 v-on 指令监听 "message" 事件，并在事件处理函数中将传递的数据赋值给了 "message" 数据属性。

3. parent/parent/children

在 Vue 中，每个组件实例都会有一个 $parent 属性和一个 $children 属性，分别指向它的父组件和子组件实例。通过这些属性，可以在组件树中访问其他组件的实例。

在上述代码中，我们在子组件中通过 $parent 属性访问了父组件的实例，并调用了父组件的 "handleMessage" 方法来处理数据。

4. $refs

在 Vue 中，每个组件实例都有一个特殊的属性 $refs，用于在模板或 JavaScript 代码中访问该组件实例的 DOM 元素或子组件实例。

在上述代码中，我们在父组件中使用 ref 属性给子组件命名，并在 mounted 钩子函数中通过 this.$refs 访问了子组件实例。然后我们可以访问子组件实例中的数据或方法。

vue-router 路由

Vue Router 是 Vue.js 官方的路由管理器。它允许您在 Vue 应用程序中实现单页面应用程序 (SPA) 的导航功能，并且提供了多种路由功能，如动态路由、嵌套路由和路由传参等。

以下是一些与 Vue Router 相关的主要概念和功能：

路由映射：通过定义路由映射关系，您可以将 URL 路径映射到相应的组件，从而在不同的路径下渲染不同的内容。
动态路由：支持使用动态参数来匹配路径，例如 /user/:id 可以匹配到 /user/123 或 /user/john。
嵌套路由：允许您在一个父路由内部嵌套子路由，构建更复杂的页面结构。
路由传参：支持通过路由传参来传递数据给目标组件，例如在跳转到新页面时传递一些参数。
导航守卫：提供了全局前置守卫、全局后置守卫、路由独享的守卫等功能，可以在路由切换前后执行相应的逻辑。

使用 Vue Router，您可以轻松地构建具有多个页面和导航功能的 Vue 单页面应用程序，同时还能够处理路由参数、路由拦截等需求。

Vue Router 提供了路由导航守卫，以便在路由进行切换前后执行相应的逻辑。以下是 Vue Router 中常用的路由导航守卫：

全局前置守卫：使用 router.beforeEach 注册全局前置守卫，可以在路由切换前执行一些逻辑，比如身份验证、权限检查等。
全局解析守卫：使用 router.beforeResolve 注册全局解析守卫，在导航被确认之前，同时在所有组件内守卫和异步路由组件被解析之后执行。
全局后置守卫：使用 router.afterEach 注册全局后置守卫，在路由切换后执行一些逻辑，比如页面滚动、页面访问统计等。
路由独享的守卫：在定义路由规则时，可以为特定路由注册 beforeEnter 导航守卫，对该路由进行单独控制。
这些路由导航守卫提供了灵活的方式来控制路由的导航行为，允许您在路由切换前后执行相应的逻辑，从而实现诸如身份验证、权限控制、页面访问统计等功能。