父子组件通信-父传子

在开发中，往往一些数据确实需要从上层传递到下层：

比如在一个页面中，我们从服务器请求到了很多的数据。

其中一部分数据，并非是我们整个页面的大组件来展示的，而是需要下面的子组件进行展示。

这个时候，并不会让子组件再次发送一个网络请求，而是直接让 大组件 ( 父组件 ) 将数据传递给 小组件 ( 子组件 ) 。

如何进行父子组件间的通信呢？ Vue 官方提到

通过 props 向子组件传递数据

通过事件向父组件发送消息

props用法：

props 的值有两种方式：

方式一：字符串数组，数组中的字符串就是传递时的名称。

方式二：对象，对象可以设置传递时的类型，也可以设置默认值等。

props有三种用法：props:[ ' fd1 ', ' fd2 '] （数组写法开发中很少用）
props:{ fd1 : String , fd2 : Array }
props:{ fd1 : {type:String,default(默认值):'hahaha',reruired(你用我子组件的时候,必须给fd1传值,就是必须写<cpn :fd1=''></>):true},
fd2 : {type:Array}
}

<body>
  <div id="app">
    <cpn :fd1='d1' :fd2='d2'></cpn>  <!--6.展示子组件，顺带连着子组件中从父组件拿的数据都展示-->
  </div>                             <!--但为啥fd1就是d1,fd2就是d2?得用v-bind标注吧-->

  <template id="a">
    <div>{{fd1}}——{{fd2}}</div>  <!--5.在子组件模板中使用从父组件拿的数据fd1,fd2-->
  </template>

  <script src="../vue.js"></script>
<script>
  const cpn = {                 //2.写一个子组件
    template:'#a',
    props:['fd1','fd2']         //3.通过props拿父组件数据d1,d2,在子组件中用fd1,fd2表示
  }

  const app = new Vue({         //1.把这个Vue实例作为父组件（它本身就可以看作是根组件）
    el:'#app',
    data:{
      d1:'哈哈',
      d2:'呵呵',
    },
    components:{               //4.为啥他是父组件那是子组件，因为这把子组件注册到了父组件上
      cpn                      //本来是cpn:cpn,这是简写
    }
  })
</script>
</body>

原文链接：https://blog.csdn.net/m0_57732962/article/details/123245897