Vue 实现父子组件交流

版权声明:本文为博主原创文章,未经博主允许不得转载。 https://blog.csdn.net/T1014216852/article/details/79958646

关于传递信息这个问题,在 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 检测。




阅读更多
想对作者说点什么?

博主推荐

换一批

没有更多推荐了,返回首页