vue组件通信----父传子(超详细)

最新推荐文章于 2024-10-04 20:01:03 发布

洋养杨阳

最新推荐文章于 2024-10-04 20:01:03 发布

阅读量6.9k

点赞数 8

文章标签： vue.js javascript 前端

本文链接：https://blog.csdn.net/weixin_58102387/article/details/122850073

版权

本文详细介绍了Vue中父子组件如何通过Props进行数据传递，强调了数据单向流动的原则，并展示了不同方式定义Props的示例。通过实例代码解释了父组件如何向子组件传递消息以及子组件如何接收和显示这些信息，进一步巩固了单向数据流的概念。

摘要由CSDN通过智能技术生成

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代码如下

 <template>
   <div class="parent">
     <h2>{{ msg }}</h2>
     <son :fa-msg="msg"></son> <!-- 子组件绑定faMsg变量,注意驼峰-->
 </div>
 </template>
 <script>
 import son from './Son' //引入子组件
 export default {
   name: 'HelloWorld',
   data () {
     return {
       msg: '父组件',
     }
   },
   components:{son},
 }
 </script>

2 . 子组件son代码如下：

 <template>
   <div class="son">
     <p>{{ sonMsg }}</p>
     <p>子组件接收到内容：{{ faMsg }}</p>
   </div>
 </template>
 <script>
 export default {
   name: "son",
   data(){
     return {
       sonMsg:'子组件',
     }
   },
   props:['faMsg'],//接收psMsg值
 }
</script>