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

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>