Vue2 框架整理：组件props，父组件向子组件传递数据，单向数据流

谁借莪１个温暖的怀抱￠ 2022-05-22 09:10 375阅读 0赞

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

vue的组件除了要把模板内的内容进行复用外，更重要的是组件间要进行通信。

父组件向子组件传递数据：

通常子组件会通过父组件传递来的数据或参数进行不同的渲染或不同的操作，就是用 props 实现正向传递数据的过程  
选项props声明需要从父级接收的数据，props 的值可以是两种：  
一、字符串数组；  
二、对象

props中声明的数据与组件data返回的数据主要区别就是props的来自父级，data中的是组件自己的数据，  
作用域是组件本身，这两种数据都可以在模板组件或computed、methods中使用

需要注意的是HTML是不区分大小写的，如果props的名称中有大写，需要改为短横分割命名，举个 **字符串数组** 的例子：

<div id="v1">  <first_component mess-data="数据123"></first_component> </div> <script src="vue.min.js"></script> <script> Vue.component('first_component',{ props:['messData'], template:"<div>{ { messData }}</div>" }); var app=new Vue({ el:"#v1" }) </script>

显示效果：  
![这里写图片描述][70 1]

--------------------

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

或者动态获取父元素的数据， 这时要使用v-bind动态绑定props的值，这样一来，放父组件发生变化时，子组件也会有变化

<div id="v1">
    
        <input type="text" v-model="val">
    
        <second_component :message="val"></second_component>
    
    </div>
    
    
    <script src="vue.min.js"></script>
    <script> Vue.component('second_component',{ props:['message'], template:"<div>{ { message }}</div>" }); var app=new Vue({ el:"#v1", data:{ val:"" } }) </script>

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

！**这个需要注意的是**，如果不使用 v-bind 传输数字、数组、对象、布尔值等数据时，默认都会被解析成**字符串**

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

vue2 与vue1 比较大的一个改变就是props, vue2中props传递的数据是单向的，通过父元素传递给子元素的数据发生变化时子元素的数据同时会发生改变，但是一般情况下，子元素发生变化却不会影响父元素。

注意！这里说的是一般，在JS中对象和数组是属于“引用类型的”，指的是同一个内存空间，so~ , 如果props是对象或者数组的时候，在子组件内改变是会影响到父元素组件的。

[70]: /images/20220522/b228997f3ca549c4a5df51654ea14bbe.png
[70 1]: /images/20220522/471d44d2bb88466a85507adf5ce15256.png
[70 2]: /images/20220522/3afa891468d14a7085927278bd9e06b9.png
[70 3]: /images/20220522/3f5f3eefa8f14d118ddb6b1257f9f3b9.png