vue中子父组件传值使用prop

#vue中子父组件传值使用prop| 来源: 网络整理| 查看: 265

父组件可以通过子组件中的 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导出：

我是消息页面{{myname}} export default{ props:['myname'], }

父组件中使用：

//如果myname后面接的是一个静态字符串，可以不适用v-bind //通过v-bind定义一个动态值，如果myname后面接的是一个变量，则要使用v-bind,如下： export default { data() { return { whosname: "lisa", }; }, }; 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 // 基础的类型检查 (`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不相符时，控制台会报错, 可以有如下类型：

StringNumberBooleanArrayObjectDateFunctionSymbol

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可以是下列原生构造函数中的一个：

StringNumberBooleanArrayObjectDateFunctionSymbol 单向数据流

所有的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() } }

【本文地址】

公司简介

联系我们