本文共 897 字，大约阅读时间需要 2 分钟。

Vue传值

1.父传子

简单描述

父组件是通过props属性给子组件通信的

数据是单向流动 父—>子 （子组件中修改props数据，是无效的，会有一个红色警告）

实现步骤

1.子组件在props中创建一个属性，用于接收父组件传过来的值；

2.父组件 引入子组件–>注册子组件–>引用子组件；

3.在子组件标签中添加子组件props中创建的属性；

4.将所要传递的值赋值给该属性。

props接收的几种写法

1.直接使用 props 以一维数组的方式接收

props: ['childCom']

2.接收字符串

props: {
       childCom: String //这里指定了字符串类型，如果类型不一致会警告的哦}

3.使用对象形式接收，并赋予默认值，但是在数组这里接收有问题，一个大坑，请看第四种

props: {
       childCom: {
           type: String,        default: 'sichaoyun'     }}

4.第三种写法：接收数组，是需要以函数形式接收

props: {
       minetlist: {
         type: Array,      default: function () {
           return []      }    }  }

特别注意:

所有的prop都使得其父子prop形成一个单向数据流，即单向下数据流。父级prop的更新会单向流动到子组件中，但是反过来则不行，单向数据流能防止子组件意外改变父组件的状态。额外的，每次父组件发生改变时，子组件中的prop将会更新为最新的值。

代码演示

1 . 父组件parent.vue代码如下

2 . 子组件son代码如下：

转载地址：https://blog.csdn.net/weixin_58102387/article/details/122850073 如侵犯您的版权，请留言回复原文章的地址，我们会给您删除此文章，给您带来不便请您谅解！