当前位置: 网站首页 > 马博marathonbet

纯小白入手 vue3.0 CLI - 2.7 - 组件之间的数据流

2019-08-07来源:马博marathonbet

vue3.0 CLI 真小白一步一步入手全教程系列:https://www.cnblogs.com/ndos/category/1295752.html

尽量把纷繁的知识,肢解重组成为可以堆砌的知识。

我的 github 地址 - vue3.0Study - 阶段学习成果都会建立分支。

==========================

什么是数据流

拿烽火戏诸侯的典故来理解:典故里的数据是什么?战乱。如何传递数据?用烽火。尽管这个典故传递的是假数据,但它确实传递了数据。在这个典故里,数据只能单向传递,一个烽火台一个烽火台的往下传递。这是数据流。

组件内部的数据来源

1、其他组件传递的数据。2、服务器返回的数据。3、地址栏传递的数据。4、状态管理系统传递的数据。

3 和 4 分别涉及到路由和状态管理的知识,以后学习到会介绍。

2、从服务器返回的数据。也不做介绍。

本文着重介绍组件之间传递数据的方式。

props 传递数据

前面几篇文章已经用过。这里介绍其他的东西。

在大型项目中,大量的组件一般分由不同的人进行开发,那么组件之间传递数据,需要告诉组件使用者,该组件接受的数据的类型。若没有沟通过,就开始传递数据,就会出现各种问题,很有可能没有错误提示。

对比下面两种 props 的声明方式:

props: ["title", "likes", "isPublished", "commentIds", "author"]props: { title: String, likes: Number, isPublished: Boolean, commentIds: Array, author: Object}

上面的是用 [];下面的是对象字面量,key 是组件属性,value 是该属性接受的类型。下面是完整的 props 验证的代码:

props: { // 基础的类型检查 (`null` 匹配任何类型) propA: Number, // 多个可能的类型 propB: [String, Number], // 必填的字符串 propC: { type: String, required: true }, // 带有默认值的数字 propD: { type: Number, default: 100 }, // 带有默认值的对象 propE: { type: Object, // 对象或数组默认值必须从一个工厂函数获取 default: function () { return { message: "hello" } } }, // 自定义验证函数 propF: { validator: function (value) { // 这个值必须匹配下列字符串中的一个 return ["success", "warning", "danger"].indexOf(value) !== -1 } } }props 验证代码

这是 vue 中进行类型监测的特性,有效的解决了组件之间传递未知数据所带来的不确定性。

除了字符串类型以外,任何其他的数据类型,传递静态数据都必须使用 v-bind 进行绑定:

// 传递数字<blog-post v-bind:likes="42"></blog-post>// 布尔值<blog-post v-bind:is-published="false"></blog-post>// 数组<blog-post v-bind:comment-ids="[234, 266, 273]"></blog-post>// 对象字面量<blog-post v-bind:author="{ name: "nDos"}"></blog-post>

props 传递数据只能单向传递,只能由父组件向子组件传递数据。因此,子组件没有权限修改 props 中属性的值。

子组件能够控制自身 data 和 computed,因此可以采用以下方法来达到貌似“修改” props 的做法 ( 实际改变的是自身 data 和 computed ):

props: ["initialCounter"],data: function () { return { counter: this.initialCounter }}或props: ["size"],computed: { normalizedSize: function () { return this.size.trim().toLowerCase() }}

到这里,props 单向传递数据的内容已介绍完 ( 在实际的工程应用中,务必做到不要修改 this.props 的属性值,这会让你的项目变得难以理解和调试 )。不过,还有 非 props 特性,特性合并和替换、禁止特性继承 等概念需要了解,请参见官方教程。

好奇: props 和 data 中存在相同的名称的属性会如何?

明白了。报错:[Vue warn]: The data property "title" is already declared as a prop. Use prop default value instead.

组件事件 传递数据

props 是父组件喂给子组件饭。组件事件  ( $emit ) 是子组件拉屎,父组件捡回来。 $emit 的原理是发布订阅模式,网上有很多有关这方面的内容。

什么是发布订阅模式? window.addEventLinster( "load", callback ),这是订阅;发布是由浏览器内核操作的。还是不懂的话,网上的资料更多。

下面一步一步实现 组件事件。

1、修改 TopNav.vue 中的模版代码,添加点击事件:

<template> <span @click="click"> {{title}} </span></template>

2、TopNav.vue 中添加 methods,其中 this.$emit("click-event", "点击") 便是发布事件:

methods: { click: function(){ this.$emit("click-event", "点击") } }

3、About.vue 中修改其中模板代码,其中的 @click-event="click" 便是订阅事件,而 click 便是 callback 程序:

<top-nav title="推荐" @click-event="click"/>

4、About.vue 中定义 click 函数

methods: { click(e){ console.log(e) } }

保存后运行,单击【推荐】,控制台显示 “点击”。

组件事件简单的用法,就这么简单。实际上 vue 还提供了很多其他的东西,比如 v-model、将原生事件绑定到组件上、.sync 修饰符(为了简化代码的语法糖) 等内容。去往官方教程进行深造。

==========================

组件的数据流便介绍到这里,相关代码也已经上传至 GitHub.

, 1, 0, 9);