vue3.0 CLI 真小白一步一步入手全教程系列: https://www.cnblogs.com/ndos/category/1295752.html
尽量把纷繁的知识, 肢解重组成为可以堆砌的知识.
我的 github 地址 - https://github.com/yokees/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 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 https://github.com/yokees/vue3.0Study .
来源: https://www.cnblogs.com/ndos/p/9645186.html