关于传递信息这个问题,在 Vue 中我认为有两种方式:
- 父子组件进行 props 传递信息
- 通过 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: '' // 默认值为空字符串 } }
接收完了之后,我们就可以在这个组件进行使用啦。
扫描二维码关注公众号,回复:
28605 查看本文章
如果是在组件属性赋值,那么就这么写:
<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 检测。