Vue 实现父子组件交流

关于传递信息这个问题，在 Vue 中我认为有两种方式：

1. 父子组件进行 props 传递信息
2. 通过 Vuex 状态树进行管理

在我认为，不是有 Vuex 的项目就一定要用 Vuex。像我今天碰到的需求，是父组件在 mounted 的时候，先拉取数据，然后传给一个子组件。子组件拿到数据后进行重新渲染。根据这样的需求，我选择通过 props 来实现更加简便，不用维护 Vuex。

首先说明，我用的是 Vue 2.5

实现方式

父组件

首先是 Html 部分，我定义了一个 child 组件，然后定义了一个 name 属性传递给子组件

<div class='chart-container'>
   <child :name="name"></child>  
</div>

然后在 data 方面进行返回：

export default {
  data() {
    name: 'child'
  }
}

上面定义了父组件的一个属性：“name”，并进行赋值为“child”。我们可以在其他地方调用 this.name = *** 来进行更新值。

子组件

首先子组件需要进行接收（注意，父组件传过来的是一个基本数据类型 String，不是对象。有关对象的传递方法可以看 props 讲解）

export default {
  props: {
    name: {
      type: String,  // 定义接收的类型为 String，防止传递出错
      default: ''    // 默认值为空字符串
    }
}

接收完了之后，我们就可以在这个组件进行使用啦。

如果是在组件属性赋值，那么就这么写：

<input :value="name"/>

如果是不是属性，可以这么写：

<div>{{ this.name }}</div>

如果是组件方法里也是通过 this.name 来调用。

Prop 验证

我们可以为组件的 prop 指定验证规则。如果传入的数据不符合要求，Vue 会发生警告。

要指定验证规则，需要用对象的形式来定义 prop，而不用字符串数组

Vue.component('example', {
  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 value > 10
      }
    }
  }
})

上面的 type 可以是下面原生构造器：

• String
• Number
• Boolean
• Function
• Object
• Array
• Symbol

type 也可以是一个自定义的构造器，使用 instanceof 检测。