41. Vue组件传值-父组件向子组件传值

41. Vue组件传值-父组件向子组件传值

前言

前面写了组件的创建、切换等等篇章，主要讲述了组件自身如何在父组件​​app​​中如何渲染使用。这里存在一个问题，就是父组件的数据如何传递到子组件中。

这是一个很常见的情况，如果是​​jQuery​​​那么都是直接传参数就是了，而在​​Vue​​​框架中，这里就要使用子组件中​​props​​属性来处理了。

官网介绍​​props​​​地址：​​​​v-bind​​​来绑定​​msg​​到子组件中，进行传值

image-20200210233115672

通过​​v-bind​​​将父组件的​​msg​​​绑定传递到子组件的​​parentmsg​​中，下面来看看浏览器是否正常显示，如下：

image-20200210233242625

可以从错误提示看到，使用​​v-bind​​​的传递值都是要在子组件进行定义的，不能直接使用。那么是不是在子组件的​​data​​中进行定义呢？

当然不是，子组件有一个特殊的属性​​props​​，专门用来定义父组件传递下来的参数，并且传递下来的参数只能是只读。

4.使用​​props​​定义父组件传递下来的值

image-20200210233559472

浏览器显示如下：

image-20200210233750580

显示已经可以正常显示父组件中，传递下来的值了。那么下面来看看，使用​​props​​定义的值，能否被修改。

5.修改​​props​​定义的值，查看是否会报错

image-20200210235256634

image-20200210235409906

告警信息如下：

vue.js:634 [Vue warn]: Avoid mutating a prop directly since the value will be overwritten whenever the parent component re-renders. Instead, use a data or computed property based on the prop's value. Prop being mutated: "parentmsg"found in--->

可以从告警信息看出，的确​​props​​​定义的值在​​Vue​​框架是不需要修改的，只能是只读。

那么反过头来看，子组件中可读可写的数据只有是​​data​​定义出来的值才可以。

版权声明：本文内容由网络用户投稿，版权归原作者所有，本站不拥有其著作权，亦不承担相应法律责任。如果您发现本站中有涉嫌抄袭或描述失实的内容，请联系我们jiasou666@gmail.com 处理，核实后本网站将在24小时内删除侵权内容。