Vue3 _ 16. Vue CLI 4.3.15 中通过 Prop 实现父子组件沟通（上）

上一个博客，我们引入了组件的概念，这里我们来学习一下父子组件如何进行沟通。这里我们先来学习最简单最常用的 Prop 声明方式

一、环境构建

首先先清理一下我们的项目，把上面选中的这些直接删除即可。然后再打开 router 目录中的 index.js 文件，清除一下之前的数据。

自己把红框的东西配置好。

接着我们在 view 中创建一个 ChildView.vue 的子组件，并且自己在 App.vue 中引入一下。

启动运行一下。

二、改写父子组件

我们在父组件中定义一个数据，叫 childData，里面随便放点什么，接着我们把这个 childData 传递到子组件中进行显示。

App.vue

这里我们直接在子组件标签上自定义一个变量，这里我叫 childData1（用 ：是省略了 v-bind），然后给他赋值 childData。这里我们就相当于用 childData1 这个东西把父组件中的 childData 传递过去了。

ChildView.vue

子组件是需要通过 props 属性标签进行接收。

这里要注意的是，props 中是获取的父组件 v-bind 的值名称，还有一点是，这里的 props 是对应的一个数组，也就是说，我们可以接收多个~~。

最后我们直接进行渲染到页面即可。保存来看效果~~~

这样，一个最简单的父子组件沟通其中的传递我们就做完了。

这一篇东西不多，大家自己操作一下~~

有问题可以联系我：QQ 2100363119，欢迎大家访问我的个人网站：https://www.lemon1234.com

最近网站已经做好，并且已经上线，欢迎各位留言~~~