vue组件通信

简介: vue组件通信


组件通信

在Vue组件通信中其中最常见的通信方式就是父子组件之中的通信,而父子组件的设定方式在不同情况下又各不相同,归纳起来,组件之间通信如图5-8所示。最常见的就是父组件为控制组件而子组件为视图组件。父组件传递数据给子组件使用,遇到业务逻辑操作时子组件触发父组件的自定义事件。

作为一个Vue初学者不得不了解的就是组件间的数据通信(暂且不谈Vuex,后面章节会讲到)。通信方式根据组件之间的关系有不同之处。组件关系有下面3种:父→子,子→父,非父子。

我们已经知道,父组件向子组件通信是通过props传递数据的,就好像方法的传参一样,父组件调用子组件并传入数据,子组件接收父组件传递的数据进行验证后使用。

props可以是数组也可以是对象,用于接收来自父组件的数据。props可以是简单的数组或者使用对象作为替代,对象允许配置高级选项,如类型检测、自定义校验和设置默认值。

自定义事件

当子组件需要向父组件传递数据时,就要用到自定义事件。v-on指令除了监听DOM事件外,还可以用于组件之间的自定义事件。

在子组件中用$emit()来触发事件以便将内部的数据传递给父组件,如例所示。

子组件向父组件传递数据

解析上面示例中代码的执行步骤:

(1)子组件在自己的方法中将自定义事件及需要传递的数据通过以下代码传递出去:

this.$ emit('myclick','这是我传递出去的数据','这是我传递出去的数据2')

· 第一个参数是自定义事件的名字。

e m i t / emit/emit/on

这种方法通过一个空的Vue实例作为中央事件中心,用它来触发事件和监听事件,巧妙而轻量地实现了任何组件间的通信,包括父子、兄弟、跨级。当我们的项目比较大时,可以选择更好的状态管理解决方案Vuex。

实现方式如下:

假设兄弟组件有3个,分别是A、B、C组件,C组件如何获取A或者B组件的数据,

页面显示效果

$on监听了自定义事件data-a和data-b,因为有时不确定何时会触发事件,一般会在mounted或created钩子中进行监听。

内容分发

在实际项目开发中,时常会把父组件的内容与子组件自己的模板混合起来使用。而这样的一个过程在Vue中被称为内容分发,也常常被称为slot(插槽)。其主要参照了当前Web Components规范草案,使用特殊的slot 元素作为原始内容的插槽。

基础用法

由于slot是一块模板,因此对于任何一个组件,从模板种类的角度来分,其实都可分为非插槽模板和插槽模板。其中非插槽模板指的是HTML模板(也就是HTML的一些元素,例如div、span等构成的元素),其显示与否及怎样显示完全由插件自身控制,但插槽模板(也就是slot)是一个空壳子,它显示与否及怎样显示完全由父组件来控制。不过,插槽显示的位置由子组件自身决定,slot写在组件template的哪部分,父组件传过来的模板将来就显示在哪部分。

一般定义子组件的代码如下:

页面显示结果:这是子组件内容。span 123456/span 内容并不会显示。注意:虽然span 标签被子组件的child标签所包含,但由于它不在子组件的template属性中,因此不属于子组件。

在template中添加slot /slot 标签,代码如下:

页面显示结果:123456这是子组件内容。

我们分步解析一下内容分发,现在我们看一个架空的例子,帮助理解刚刚讲过的严谨而难懂的定义。假设有一个组件名为my-component,其使用上下文代码如下:

再假设此组件的模板为:

那么注入后的组件HTML相当于:

标签slot 会把组件使用上下文的内容注入此标签所占据的位置。组件分发的概念简单而强大,因为它意味着对一个隔离的组件除了通过属性、事件交互之外,还可以注入内容。

将此案例变成可以执行的代码,代码如下:

个组件如果需要外部传入简单数据,如数字、字符串等,可以使用property;如果需要传入js表达式或者对象,可以使用事件;如果希望传入的是HTML标签,那么使用内容分发就再好不过了。所以,尽管内容分发这个概念听起来极为复杂,而实际上可以简化为把HTML标签传入组件的一种方法。所以归根结底,内容分发是一种为组件传递参数的方法。

编译作用域

在深入了解分发API之前,先明确内容在哪个作用域里编译。假定模板为:

这里的message应该绑定父组件的数据,还是绑定子组件的数据呢?答案是message就是一个slot,但它绑定的是父组件的数据,而不是组件child-component 的数据。

组件作用域简单地来说就是:父组件模板的内容在父组件作用域内编译;子组件模板的内容在子组件作用域内编译,如例

这里someChildProperty绑定的是父组件的数据,所以是无效的,因此获取不到数据。如果想在子组件上绑定,可以采用如下代码:

目录
打赏
0
3
3
0
196
分享
相关文章
|
2月前
|
vue使用iconfont图标
vue使用iconfont图标
155 1
Vue Router 核心原理
Vue Router 是 Vue.js 的官方路由管理器,用于实现单页面应用(SPA)的路由功能。其核心原理包括路由配置、监听浏览器事件和组件渲染等。通过定义路径与组件的映射关系,Vue Router 将用户访问的路径与对应的组件关联,支持哈希和历史模式监听 URL 变化,确保页面导航时正确渲染组件。
ry-vue-flowable-xg:震撼来袭!这款基于 Vue 和 Flowable 的企业级工程项目管理项目,你绝不能错过
基于 Vue 和 Flowable 的企业级工程项目管理平台,免费开源且高度定制化。它覆盖投标管理、进度控制、财务核算等全流程需求,提供流程设计、部署、监控和任务管理等功能,适用于企业办公、生产制造、金融服务等多个场景,助力企业提升效率与竞争力。
69 12
Vue中的class和style绑定
在 Vue 中,class 和 style 绑定是基于数据驱动视图的强大功能。通过 class 绑定,可以动态更新元素的 class 属性,支持对象和数组语法,适用于普通元素和组件。style 绑定则允许以对象或数组形式动态设置内联样式,Vue 会根据数据变化自动更新 DOM。
Vue Router 简介
Vue Router 是 Vue.js 官方的路由管理库,用于构建单页面应用(SPA)。它将不同页面映射到对应组件,支持嵌套路由、路由参数和导航守卫等功能,简化复杂前端应用的开发。主要特性包括路由映射、嵌套路由、路由参数、导航守卫和路由懒加载,提升性能和开发效率。安装命令:`npm install vue-router`。
iframe嵌入页面实现免登录思路(以vue为例)
通过上述步骤,可以在Vue.js项目中通过 `iframe`实现不同应用间的免登录功能。利用Token传递和消息传递机制,可以确保安全、高效地在主应用和子应用间共享登录状态。这种方法在实际项目中具有广泛的应用前景,能够显著提升用户体验。
77 8
Vue 组件化开发:构建高质量应用的核心
本文深入探讨了 Vue.js 组件化开发的核心概念与最佳实践。
81 1
基于VUE的校园二手交易平台系统设计与实现毕业设计论文模板
基于Vue的校园二手交易平台是一款专为校园用户设计的在线交易系统,提供简洁高效、安全可靠的二手商品买卖环境。平台利用Vue框架的响应式数据绑定和组件化特性,实现用户友好的界面,方便商品浏览、发布与管理。该系统采用Node.js、MySQL及B/S架构,确保稳定性和多功能模块设计,涵盖管理员和用户功能模块,促进物品循环使用,降低开销,提升环保意识,助力绿色校园文化建设。

热门文章

最新文章

相关实验场景

更多
AI助理

你好,我是AI助理

可以解答问题、推荐解决方案等