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 验证代码 这是 vue 中进行类型监测的特性，有效的解决了组件之间传递未知数据所带来的不确定性。 除了字符串类型以外，任何其他的数据类型，传递静态数据都必须使用 v-bind 进行绑定： 复制代码 // 传递数字 // 布尔值 // 数组 // 对象字面量 复制代码 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 中的模版代码，添加点击事件： 复制代码 复制代码 2、TopNav.vue 中添加 methods，其中 this.$emit('click-event', '点击') 便是发布事件： 复制代码 methods: { click: function(){ this.$emit('click-event', '点击') } } 复制代码 3、About.vue 中修改其中模板代码，其中的 @click-event="click" 便是订阅事件，而 click 便是 callback 程序： 4、About.vue 中定义 click 函数 复制代码 methods: { click(e){ console.log(e) } } 复制代码 保存后运行，单击【推荐】，控制台显示 “点击”。 组件事件简单的用法，就这么简单。实际上 vue 还提供了很多其他的东西，比如 v-model、将原生事件绑定到组件上、.sync 修饰符(为了简化代码的语法糖) 等内容。去往官方教程进行深造。 ========================== 组件的数据流便介绍到这里，相关代码也已经上传至 GitHub.https://www.cnblogs.com/ndos/p/9645186.html