父组件向子组件传递数据
父组件通过属性的形式，向子组件传递数据。
注意观察两个count的样子
加了
:的，传递是数字，不加:，传递的是字符串。因为加了:，后面双引号里的内容是JS表达式，不再是字符串了。既然是JS表达式，当然也就是数字类型了。父组件通过属性的形式向
counter组件传递count的数据，子组件通过props来接受数据，写完这两个，在子组件的模板中就可以直接使用父组件传递过来的数据了。
子组件接收
在浏览器中看，得到的是传递过来的
0和1。
如果我们希望加上点击自身，增加数字的功能，可能理所当然会这样写。
比如说这样写
看起来好像没有事，在浏览器上点击能自加1，但是控制台内报错了。
报错啦
意思是，不要直接修改父组件传递过来的数据！！（不要随便动爸爸给的东西啊喂
Σ(っ°Д°;)っ）这里涉及到一个数据单向流的概念，也就是父组件可以向子组件传递参数（通过属性来传），传递的参数可以随意修改。但是子组件绝对不能反过来修改父组件传递过来的参数！！
也就是说父组件可以通过
<counter :count="3"></counter>将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接收；子组件是通过事件派发的形式向父组件传值。父子组件传值有一个“单向数据流”的规定，不能随意改父组件传过来的值，一定要修改的话，子组件创建一个副本，然后修改副本里的。
网友评论