vue中子父组件传值使用prop

父组件可以通过子组件中的 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()
    }
  }