vue中子父组件传值使用prop
1.注册公用组件第一种方法(推荐)在main.js中导入,然后注册,代码如下://导入tableimport table from './components/table'//Vue全局注册tableVue.component('table',table);注册全局组件后,可以再任何页面调用。第二种方法注册公用组件,注册后可以在任何页面使用,而不需要在每个页面重新import导...
父组件可以通过子组件中的 props 把数据传给子组件。
1.prop
单向向下绑定,只能父组件修改子组件的值,子组件不能修改父组件的值。
总结:
- prop 数据单项传递,父影响子,子不影响父 不能在组件中直接修改 prop 传递过来的值,Vue 会给出警告 prop
- 验证时,会在实例创建之前进行验证,所以实例的属性 (如 data、computed 等) 在 default 或 validator
- 函数中是不可用的 非 prop 特性,组件可以接受任意的特性,而这些特性会被添加到这个组件的根元素上。
所有的 prop 都使得其父子 prop 之间形成了一个单向下行绑定:父组件的 Prop 的更新会向下流动到子组件中,但是反过来则不行。这样会防止从子组件意外改变父组件以及同级子组件的状态,从而导致你的应用的数据流向难以理解。
注意:(1)所有的 prop 都使得其父子 prop 之间形成了一个单向下行绑定:父级 prop 的更新会向下流动到子组件中,但是反过来则不行。
(2)每次父级组件发生更新时,子组件中所有的 prop 都将会刷新为最新的值。这意味着你不应该在一个子组件内部改变 prop。
实例1:
子组件,把myname变量通过props导出:
<template>
<div>
我是消息页面{{myname}}
</div>
</template>
<script>
export default{
props:['myname'],
}
</script>
父组件中使用:
//如果myname后面接的是一个静态字符串,可以不适用v-bind
<my-message myname="jack"></my-message>
//通过v-bind定义一个动态值,如果myname后面接的是一个变量,则要使用v-bind,如下:
<template>
<div>
<my-message :myname="whosname"></my-message>
</div>
</template>
<script>
export default {
data() {
return {
whosname: "lisa",
};
},
};
</script>
2.prop验证
子组件用Props接收父组件传来的消息有多种形式:
(1)数组形式
props: [data1, data2]
数组形式相当于直接接收消息,不做任何校验,一般来说,不太建议使用数组形式。
(2)简单对象形式
props: {
data1: String,
data2: Array
}
简单对象形式对父组件传递的值进行了类型校验,如果传过来的值类型不一致,控制台会报错。
(3)复杂对象形式
props: {
data1: {
//基础的类型检查 (`null` 匹配任何类型)
type: String,
required: true,
default: 'default value',
validator (value) {
return (value.length < 5)
}
},
data2: {
type: Array,
required: true,
default: () => ['', '', '']
}
}
props:{
// 基础的类型检查 (`null` 匹配任何类型)
d1: Number,
// 多个可能的类型
d2: [String, Number],
// 必填的字符串
d3: {
type: String,
required: true
},
// 带有默认值的数字
d4: {
type: Number,
default: 100
},
// 带有默认值的对象
d5: {
type: Object,
// 对象或数组默认值必须从一个工厂函数获取
default: function () {
return { message: 'hello' }
}
},
// 自定义验证函数
d6: {
validator: function (value) {
// 这个值必须匹配下列字符串中的一个
return ['success', 'warning', 'danger'].indexOf(value) !== -1
}
}
}
复杂对象形式的情况下,作为对象属性的参数可以写为对象形式,参数对象含有4个属性,type、required、default、validator。
type:设定参数类型,当传入参数类型与type不相符时,控制台会报错,
可以有如下类型:
- String
- Number
- Boolean
- Array
- Object
- Date
- Function
- Symbol
required:设定参数是否是必传,当设为true时,不传该参数会报错
default:设定默认值,当参数类型为复杂类型时,需使用工厂模式生成默认值,否则Vue会在控制台抛出警告。如图所示,就通过工厂模式生成了一个长度为3的空数组。
validator:校验器,是一个函数,拥有一个代表传入值的形参,可以自定义各种校验,当返回false时,会报错,表示没通过校验。
Prop类型
到这里,我们只看到了以字符串数组形式列出的 prop:
props: ['title', 'likes', 'isPublished', 'commentIds', 'author']
我们可以为prop指定类型:
但是,通常你希望每个 prop 都有指定的值类型。这时,你可以以对象形式列出 prop,这些属性的名称和值分别是 prop 各自的名称和类型:
props: {
title: String,
likes: Number,
isPublished: Boolean,
commentIds: Array,
author: Object,
callback: Function,
contactsPromise: Promise // or any other constructor
}
prop验证
我们可以为组件的 prop 指定验证要求,例如你知道的这些类型。如果有一个需求没有被满足,则 Vue 会在浏览器控制台中警告你。这在开发一个会被别人用到的组件时尤其有帮助。
为了定制 prop 的验证方式,你可以为 props 中的值提供一个带有验证需求的对象,而不是一个字符串数组。例如:
props:{
//基础的类型检查 (`null` 和 `undefined` 会通过任何类型验证)
A:Number,
//多个可能的类型
B:[String,Number],
//必填的字符串,使用required
C:{
type:String,
required:true
},
//带有默认值的数字
D:{
type:Number,
default:100
},
//带有默认值的对象
E:{
type:Object,
//对象或数组默认值必须从一个工厂函数获取
default:function(){
return{message:'hello'}
}
},
//自定义验证函数
F:{
Validator:function(value){
//这个值必须匹配下列字符串中的一个
return ['success','warning','danger'].indexOf(value) !== -1;
}
}
}
类型检查
type可以是下列原生构造函数中的一个:
- String
- Number
- Boolean
- Array
- Object
- Date
- Function
- Symbol
单向数据流
所有的prop都使得父子组件之间形成一个从父到子的单向下行绑定:父级prop的更新会向下流动到子组件中,但是反过来不行。每次父级组件发生更新时,子组件中所有的prop都将会刷新为最新的值。
有如下情形:
(1)有一种情形是子组件试图修改prop,这个 prop 用来传递一个初始值,这个子组件接下来希望将其作为一个本地的 prop 数组来使用
在这种情况下,最好定义一个本地的 data property 并将这个 prop 用作其初始值
props: ['fatherMsg'],
data() {
return {
sonMsg: this.fatherMsg
}
},
(2)这个 prop 以一种原始的值传入且需要进行转换操作
在这种情况下,最好使用这个 prop 的值来定义一个计算属性computed
props: ['fatherMsg'],
computed: {
sonData() {
//如下,在子组件中需要对fatherMsg操作后的值进行转换成大写
return this.fatherMsg.toUpperCase()
}
}
更多推荐
所有评论(0)