vue2父子组件传值（vue父子组件的传值）

大家好，我是讯享网，很高兴认识大家。

 <svg xmlns="http://www.w3.org/2000/svg" style="display: none;"> <path stroke-linecap="round" d="M5,0 0,2.5 5,5z" id="raphael-marker-block" style="-webkit-tap-highlight-color: rgba(0, 0, 0, 0);"></path> </svg> <p>在日常开发中&#xff0c;我们经常会在一个组件中嵌套另外一个组件&#xff0c;那么如果我们父组件要向子组件传值该怎么办&#xff1f;子组件向父组件通信又该怎么办&#xff1f;本文将详细举例说明这些问题。</p>

讯享网

现在我们有个需求，我们要分别显示父和子的信息，我们当然可以在一个组件中直接显示全部信息，但是万一以后又来一个需求：我们要在母和子的信息，那其实这里就存在冗余了，所以我们把子组件单独封装成一个新的组件。那么这里就会出现一个问题，子组件的信息该如何从父组件传过去呢？

讯享网

子组件定义

使用:attribute属性向子组件传入值

讯享网

子组件通过props属性接收父组件传过来的值，这里的名字要和父组件传的值对应

测试
在这里插入图片描述
讯享网

上述的例子解决了父子组件传值的基本问题，当然prop的用法还有很多，我们可以在vue2官网上看到

Prop的大小写

camelCase (驼峰命名法) 的 prop 名需要使用其等价的 kebab-case (短横线分隔命名) 命名

讯享网

Prop 类型

我们之前使用以字符串数组形式列出的 prop

讯享网

我们也可以给每一个prop指定对应的值

传递静态或动态 Prop

之前我们传递的是动态的Prop，可以动态赋值

讯享网

我们也可以传递静态的

讯享网

单向数据流

所有的 prop 都使得其父子 prop 之间形成了一个单向下行绑定：父级 prop 的更新会向下流动到子组件中，但是反过来则不行。这样会防止从子组件意外变更父级组件的状态，从而导致你的应用的数据流向难以理解。
额外的，每次父级组件发生变更时，子组件中所有的 prop 都将会刷新为最新的值。这意味着你不应该在一个子组件内部改变 prop。如果你这样做了，Vue 会在浏览器的控制台中发出警告。

官方这段话表明了，我们对于父组件传过来的值最不要直接修改，官方例举了两个常用的变更案例
1.这个 prop 用来传递一个初始值；这个子组件接下来希望将其作为一个本地的 prop 数据来使用

2.这个 prop 以一种原始的值传入且需要进行转换

讯享网

类型校验

之前我们使用字符串数组形式列出的 prop，父组件不知道子组件prop值的类型，可能传值的时候传错，所以我们可以给值指定类型。如果有一个需求没有被满足，则 Vue 会在浏览器控制台中警告你

当 prop 验证失败的时候，(开发环境构建版本的) Vue 将会产生一个控制台的警告

既然父可以向子传值，那么子是否可以通信父呢？当然可以，这时候我们要借助vue的on，下面我们看代码：

子组件

讯享网

父组件

这里首先介绍一下vue提供的两个重要函数emit和on

on

emit

讯享网

组件B

组件A

讯享网

这里引入了事件总线（event bus）的概念，事件总线：事件发送者将事件消息发送到一个事件总线上，事件订阅者向事件总线订阅和接收事件，然后再处理接收到的事件
而我们这里的事件总线的载体就是一个Vue的实例对象，因为在emit和on都是Vue的一个实例方法。
当然我们还可以使用$attrs / listeners来实现类似效果，这里就不多做介绍了，有兴趣的读者可以自行了解
但是如果学过Vuex的话，利用Vuex来传值会很方便，Vuex之后会慢慢讲，不急。学习是个漫长的过程，慢慢来

由于作者能力有限，若有错误或者不当之处，还请大家批评指正，一起学习交流！