【Vue5】父子组件间的数据传递

父组件向子组件传递数据

父组件通过属性的形式，向子组件传递数据。

注意观察两个count的样子

加了 :的，传递是数字，不加 :，传递的是字符串。因为加了 :，后面双引号里的内容是JS表达式，不再是字符串了。既然是JS表达式，当然也就是数字类型了。
父组件通过属性的形式向 counter组件传递 count的数据，子组件通过 props来接受数据，写完这两个，在子组件的模板中就可以直接使用父组件传递过来的数据了。

子组件接收

在浏览器中看，得到的是传递过来的 0和 1。

如果我们希望加上点击自身，增加数字的功能，可能理所当然会这样写。

比如说这样写

看起来好像没有事，在浏览器上点击能自加1，但是控制台内报错了。

报错啦

意思是，不要直接修改父组件传递过来的数据！！（不要随便动爸爸给的东西啊喂 Σ(っ°Д°;)っ）
这里涉及到一个数据单向流的概念，也就是父组件可以向子组件传递参数（通过属性来传），传递的参数可以随意修改。但是子组件绝对不能反过来修改父组件传递过来的参数！！
也就是说父组件可以通过 将 3修改成 4，但是子组件不能修改，只能用。
为什么要这样做呢？
如果父组件传递进来的不是基础数据类型，而是一个对象（也就是引用数据），如果在子组件内修改传递过来的数据内容，有可能接收的引用型的数据还被其他的子组件所使用，这样的话，会导致其它组件也受影响。
那我就是很想改咋办？
自己创个呗。

我自己创个number

在 data中创个 number来赋值一份 count的值，也就是现在 this.number是子组件自己的， this.count是父组件的，
然后模板中显示的要替换成自己的，同时方法中操作的也要替换成自己的（爸爸的不可以用，自己的总能用吧）

组件参数校验

比如说子组件通过props接收父组件传递过来的内容，子组件有权对这些内容进行一些约束，比如说，它想要传过来的数据是字符串，不要数字。

约束传递过来的类型

此时Vue报错了，类型不匹配

如果想要的要么是数字，要么是字符串。可以这样写：

借助数组来实现

有这么几种约束方式

来一一解释一下：
propA: 意思是基础类型，可以为数字，字符串等，单一的
propB: 意思是想要多个可能的类型，用数组来实现
propC: 如果required为true，那么必须得传一个String类型的，不可以不传，如果required为false，父组件可以不传
propD: 默认值，如果父组件没有传，这时用的就是默认值，如果有传值，默认值不生效
propE: 默认值为对象
propF: 自定义验证规则，比较复杂的校验。比如说图中传入的值必须匹配下列字符串中的一个，
或者说要求传入的值从长度要大于n，如果匹配不报错，如果不符合验证规则。在console中会报错

非props特性

先来说说props特性：

当父组件使用子组件时，通过属性向子组件传值时，恰好子组件时声明了对父组件传递过来的属性的接收。
也就是说：这里父组件向子组件传递了一个content，然后子组件恰好在props里声明了一个content，这样父子组件有一个对应关系。这种形式的属性叫做props特性。

我是例子例子例子

特点有：
1、属性的传递不会在DOM标签上显示的，也就是在浏览器中，看不到content="hello"这个
2、子组件接收了父组件传递过来的值之后，在子组件内可以直接通过插值表达式{{content}}或者this.content来取得` content`的内容

非props特性：

也就是说父组件向子组件传递了一个属性，但是子组件没有props这块内容，也就是子组件并没有声明要接收父组件传递过来的内容。
这种情况，页面会报错：说没有定义，无法被使用

报错啦报错啦

特点:
1、无法获取父组件的内容，因为没有声明，所以没法用
2、会显示在DOM的属性中的，会展示在子组件最外层的DOM标签的html属性中

显示出来了

（其实这里我还是没看出来非props的特性有啥用。。。以后要是遇到了，再来改这部分）

---

子组件向父组件传递内容

上一篇就有说这个问题，也就是Vue4那一章有说，这里是为了归类，再提一遍。
子组件向父组件传值，通过事件的形式。
也就是$emit来触发一个事件，这个事件可以带参数。

通知父组件啦

比如说这里，子组件点击事件内，向父组件通过$emit派发一个inc事件，同时加上一个参数2，意思是告诉父组件，我有一个inc事件，每次变化2。
然后父组件去监听这个inc事件，用@来监听，比如说这里的@inc="handleIncrease" ，意思是用handleIncrease来对inc进行监听处理。

这段属于根组件，所以要写在根组件的methods里

step是$emit传递过来的参数

前面 $emit传递过来有带参数2，这里的 step是形参，来接收参数。

总结一下下

Vue中，父组件向子组件传值是通过属性来传值，子组件通过pros接收；子组件是通过事件派发的形式向父组件传值。父子组件传值有一个“单向数据流”的规定，不能随意改父组件传过来的值，一定要修改的话，子组件创建一个副本，然后修改副本里的。