Vue 组件之使用props传递数据

Dear 丶 2022-05-15 23:09 908阅读 0赞

组件不仅仅是要把模板的内容进行复用，更重要的是组件间的通信。通常父组件的模板中包含子组件，父组件要正向的向子组件传递数据或者参数，子组件接收到后根据参数的不同来进行对应的渲染。这个正向的数据传递在vue组件中就是通过props来实现的。

在组件中，我们首先需要使用选项props申明需要从父组件接收的数据，字符串数组的props的传递如下：  
示例：  
**子组件**

<template> <div> <p>我是子组件，接收来自父组件的信息：{ { message}}</p> </div> </template> <script> export default { name: "child", props: ['message'] } </script> <style scoped> </style>

**父组件**

<template>
      <div>
        <p>我是父组件，传递消息给子组件,需要传递的消息在下面输入：</p>
        <p><input type="text" v-model="message"/></p>
        <child :message="message"></child>
      </div>
    </template>
    
    <script> import child from './VComChild' export default { name: "parent", data(){ return{ message:'' } }, components : { 'child': child } } </script>
    
    <style scoped> </style>

其中：

props: ['message']

就是我们使用props的语法，运行效果：  
![这里写图片描述][70]

![这里写图片描述][70 1]

其中如果我们要传递多个参数，可以在props的数组中直接加入我们要接收的参数的名称就好：

props: ['message','datas']

另外，在传递参数的时候，可以直接传递固定的数据，也可以传递动态数据。在传递动态数据的时候需要使用v-bind来动态绑定props的值，就像上面的一样。而向字符串的话则不需要v-bind

在实际的业务中我们经常会碰到下面的情况：  
1.父组件传递初始值进来，子组件将它作为初始值保存起来，然后在自己的作用域内使用。还是拿上面的例子来说：

<template> <div> <p>我是子组件，接收来自父组件的信息：{ { sub_message}}</p> <p>子组件输入：<input v-model="sub_message"/></p> </div> </template> <script> export default { name: "child", props: ['message'], data(){ return{ sub_message:this.message } } } </script> <style scoped> </style>

父组件中我们给message设置一个初始值：

data(){ return{ message:'初始信息' }
        }

此时，我们运行程序：  
![这里写图片描述][70 2]

大家可以看到，修改父组件数据后没有对子组件产生任何影响，反过来，我们修改子组件内的sub\_message:this属性，也不会影响父组件。

2.props作为需要被转变的原始值传入，这种情况下我们可以使用计算属性来完成:

<template> <div> <p>我是子组件，接收来自父组件的信息：{ { sub_message}}</p> </div> </template> <script> export default { name: "child", props: ['message'], computed: { sub_message() { return this.message + "--来自父组件的消息" } } } </script> <style scoped> </style>

运行效果：  
![这里写图片描述][70 3]

**props数据验证**  
在我们需要对自己的组件进行数据验证时，此时使用props就需要使用对象写法了。此时验证的类型可以如下：

String
    Number
    Boolean
    Object
    Array
    Function

下面我们就通过一个例子来看一下：

<template> <div> <template> <div> <p>props_number:{ { props_number}}</p> <p>props_string_number:{ { props_string_number}}</p> <p>props_boolean:{ { props_boolean}}</p> <p>props_must:{ { props_must}}</p> <p>props_obj_arr:{ { props_obj_arr}}</p> <p>props_function:{ { props_function}}</p> </div> </template> <script> export default { name: "child", props: { // 必须是数字类型 props_number: Number, // 必须是数字或者字符串 props_string_number: [String, Number], // 必须是布尔值，如果没有定义，默认值就是true props_boolean: { type: Boolean, default: true }, // 必须是数字，而且必须传递 props_must: { type: Number, required: true }, // 如果时数字或者对象，默认值必须时一个函数来返回 props_obj_arr: { type: Array, default() { return [1, 2] } }, // 自定义一个验证函数 props_function: { validate(value) { return value > 20 } } } } </script> <style scoped> </style> </div> </template> <script> export default { name: "child", props: { // 必须是数字类型 props_number: Number, // 必须是数字或者字符串 props_string_number: [String, Number], // 必须是布尔值，如果没有定义，默认值就是true props_boolean: { type: Boolean, default: true }, // 必须是数字，而且必须传递 props_must: { type: Number, required: true }, // 如果时数字或者对象，默认值必须时一个函数来返回 props_obj_arr: { type: Array, default() { return [1, 2] } }, // 自定义一个验证函数 props_function: { validator(value) { return value > 10 } } } } </script> <style scoped> </style>

这里我们在子组件里面定义了我们常见的几种用法，然后在父组件中为这些信息传递值：

运行程序：

![这里写图片描述][70 4]  
让我们修改几个属性的值，来看下我们设置的这些验证是否是有作用，我们去掉必须要传递的prop\_must，然后在控制台查看：  
![这里写图片描述][70 5]

这里我们说明一下，当props的验证失败的时候，开发版本下会在控制台输出一条警告，就像你们上面看到的一样。而在正式版本中vue则会拒绝输入值。

[70]: /images/20220516/3bbda3fc3c734021bdc89e547ef2e624.png
[70 1]: /images/20220516/2d1f46ac4c124dd5af3c3142177d5fbc.png
[70 2]: /images/20220516/2e338e4ec8244236ad80a5a05988c260.png
[70 3]: /images/20220516/5c0beb2e8135456ba1d3d854b8285a76.png
[70 4]: /images/20220516/3776116044674afea0a477dec08cfa45.png
[70 5]: /images/20220516/2327d3e4585c4702814acc8b5ab4d5d0.png