纯小白入手 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
      }
    }
  }

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.