纯小白入手 vue3.0 CLI - 2.7 - 组件之间的数据流
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 } } }
这是 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 class="topnav" @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.