【Vue】组件间传值及传值校验

代码：

现在页面上应该只展示123。

接下来我们来创建一个全局组件，全局组件怎么创建，大家还记得吗？我们这一块就用一个全局组件，‍‍app.component，我们创建一个叫做test这样的组件，里面我们给一个template，‍‍然后让ta等一个div test。‍‍

我这个组件是全局的，那么在我的应用下就可以用组件，怎么用？直接通过标签的形式来用 是不是就可以了？你用test组件‍‍：

现在有一个父子关系的‍‍两个组件：

有的时候‍‍我子组件下展示的内容并不想把它写死，比如说现在这个test它的内容是死的，只能展示test。‍‍那么我希望它展示的内容，你通过在调用它的时候可以自定义，我们可以怎么去写？

我们可以这么去写，比如说我们叫做content等于‍‍ hello world:

我们把这个数据通过属性的形式传递给了test组件，‍‍那么这个组件如果想用这个content该怎么去用它? 在这里写一个props:

也就是说外部传递过来的属性参数，我通过props来把它接收过来，我通过‍‍ props接收content 外部传过来的属性，接收了属性之后，我就可以在这里‍‍【第21行】去使用它了，怎么用它？是不是用两个花括号{{content}}一个插值表达式的形式来去用content就可以了，

我们可以看到当我们这么去写代码的时候，‍‍子组件展示的内容不是固定的，而是父组件这里调用子组件的时候给它传递的一个动态的内容：

这样的话大家就先了解了父子组件传递这样的一个知识点，父组件调用子组件的标签，‍‍ 然后通过标签上的属性向子组件传递一些值，‍‍自组件通过props先来接收对应的 content属性的内容，‍‍然后在props定义好了 content，你去接受它之后，你就可以在模板里面直接使用父组件传递过来的数据了。‍‍

父子组数据的传递，也就这些东西，‍‍有的时候我会向子组件传递一个数字，比如说123，那么子组件现在也会显示出这个数字：

你会发现它是一个字符串，不是一个数字，我想传一个数字可以怎么办呢？‍‍我们可以通过一个动态传参的方式把数字传递下来，什么叫动态传参？‍‍ 我们可以在这里写一个data，‍‍然后我们return一个内容叫做number，num它的值是123。

这里我们说一个标签上面我想写标签的参数，‍‍我是不是可以加个v-bind，让这个参数是一个动态的参数:

这样去写的话，这里面我就可以写一个变量了，是不是就写一个num这样的数据项:

遇到这种场景，我可以用一个动态参数的方式去解决。‍‍动态参数是什么意思？就是在这里我不直接这么去写一个content很明显的这样的东西:

而是我把它定义在一个数据项里面，再通过v-bind的指令把它传递下去，这样的方式叫做动态指令，‍‍或者说前面带冒号的这种传参叫做动态属性的传参:

而不带冒号的直接传参，我们一般把它叫做静态传参。‍‍但是你会发现如果你做静态传参的话，一般也只能传一些字符串这样的内容了，或者你传递这种数字，其实你通过这种静态传参的话，传的也是一个字符串，它会打印一个string，‍‍但是你把它改成一个动态的东西的话，那么它就会变成一个number。‍‍【这是由string变成number的机制，重点关注！】

所谓的动和静止的是什么？‍‍如果是一个静态的东西，它就是一个固定的字符串写死的，但是如果它是一个冒号的话，‍‍那么它的内容实际上是由data里的数据决定的【第14行】， 数据是很灵活的可以修改的，‍‍这样的话它就是一个动态的状态，所以这种情况下我们把它叫做一个动态属性。‍‍

当我父组件向子组件传递内容的时候，‍‍我们看现在传了一个numb是123，子组件也去接收这样的一个content，打印的也是一个number。‍‍那么实际上‍‍子组件可以对父组件传递过来的东西做一个校验，‍‍比如现在我们来看，我希望test接收的content是一个字符串，但很显然你传递过来的是一个 number，‍‍我希望如果你传错的时候就会给我一些提示，我可以怎么写?

这个时候你接收content的时候‍‍可以不写一个数组，而把它改成一个对象，我这样去写:

然后后面我们跟一个string，‍‍我们来解读一下这段话的意思。‍‍ 子组件叫做test，它接受content这样的外部传递过来的属性，‍‍那么传递过来的属性必须是一个string类型，现在你传递过来的content 内容明显是一个number类型 123，

我们现在看下它的效果，刷新，它还是会打印出number，但是如果你打开控制台，‍‍你会发现它会说类型校验错误，希望你传递过来的123是个字符串，‍‍但是我拿到的却是一个number，它会给你一些警告：

假设这个时候我把123改成字符串的123：

那么你传递给子组件的 number是不是就是一个字符串？‍‍子组件说我正好要接收一个字符串，是不是它就不会报错了呢？

我们来看一下，刷新一下，没有任何的警告提示了：

这就是一个字符串类型校验Vue里面提供的一个功能。‍‍当然你不仅可以校验 String类型，‍‍还可以校验什么？还可以校验布尔类型。比如说这里写一个Boolean，‍‍

那么我看ta会不会报错,刷新，ta会警告对不对？‍‍

ta说你应该传一个布尔类型的数据过来，但是你content传递的是一个字符串，那么我这里可以把它改成一个true 布尔类型呗，‍‍再来看它就不会报任何的问题了：

function指的是一个函数类型，它还可以传函数。‍‍我们来看看函数怎么回事，比如说function，

刷新，‍‍它会告诉你 你应该传一个函数，但是你传的是一个value 的值是一个布尔值， 那么我们把number改成一个函数，比如说这样的一个函数：

它就不报错了，这个函数肯定不是用来展示的，‍‍这个函数一般干什么用？一般我们可以这样用：

比如说我加一个绑定事件 @click，等于this点 handleClick，‍‍然后在message里面我们可以这样写，handleClick比如我这里弹一个‍‍456， 然后再调用this点传递过来的 content，因为它是一个函数了，你就可以直接执行它。‍‍ 那么页面上打印的应该是456 123：

你可以把一个函数传给子组件，让它去执行。‍‍

接着‍‍我们除了这么去做一些类型校验之外，其实我们还可以做额外的一些类型校验，‍‍比如说这块我先给它写上‍‍ content，它的类型你必须得传递一个number进来 向它不报警告，‍‍ 然后在下面我们可以写点别的，比如说我们可以写一点，比如说 content它还是一个对象，‍‍type是一个number，然后required 是 true：

这种语法的意思是‍‍我接受一个content 参数，它的类型得是一个number，而且你必须传这个参数，我们看一看现在你传的类型‍‍是一个number 123，而且你也传递了这个内容，

所以它现在应该是不报错的，‍‍但是如果你不传 counter的属性，父组件不向子组件传：

那么子组件要求你必须传，你不传他 一定是会报警告的，它说你需要你传content，但是你没有传，这就是required的法。

required是必填，除此之外还有什么？还有 default，default的意思是什么？这块我写一个default，给它一个789：

它的意思是什么？‍‍它的意思是我现在要接受一个类型是number的参数，‍‍然后我要求如果你不传的话，它默认我会给他789，我们看一下是不是这样的， 我们这里把content展示出来，而不是用type of:

如果你传content过去:

别忘了加冒号, 你会发现‍‍它会打印出123，也就是你传值的时候，‍‍它会去打印出你传的值，如果你不传的话，它会用默认值default。‍‍

当然default不一定是一个数字，还可以是一个函数，‍‍所以你也可以把刚才的123改成一个函数的形式，让这个函数里腾一个123就可以了，‍‍它等价于default冒号123:

这块我是传递了，如果你不传的话，比如给个456，同时你不传它，‍‍默认值也是生效的。‍‍

类型现在我们能限制它是一个number，但有的时候我希望它传的内容 比如说你这个值必须小于1000，‍‍我想做这个校验可以怎么校验？我可以在这里写一个validator，它也是一个函数:

这个函数它会接收一个值的，就是你父组件传递过来的参数的值，‍‍ 然后判断return value小于1000，因为它最终要return一个true或者false，‍‍ 如果value小于1000的话，return会是true能够通过校验，如果大于1000它就是false了，‍‍就表明你传的这个值就不对，我们希望它现在传递的值都是小于1000的值。‍‍

我现在传递过来的是123没有任何的问题，‍‍但是我传递的内容比如说改成1234大于1000了，它就会提示我们说你现在做这个参数的校验，发现参数不太符合我们的要求，大于了1000，‍‍那么ta就会给我们一个警告。‍‍