前言
前面写了组件的创建、切换等等篇章,主要讲述了组件自身如何在父组件app
中如何渲染使用。这里存在一个问题,就是父组件的数据如何传递到子组件中。
这是一个很常见的情况,如果是jQuery
那么都是直接传参数就是了,而在Vue
框架中,这里就要使用子组件中props
属性来处理了。
官网介绍props
地址:https://cn.vuejs.org/v2/guide/components-props.html
那么下面来看看一个父组件向子组件传值的示例。
示例:使用props传静态值
1.首先编写一个组件以及父组件,展示基本的信息

首先浏览器展示看看组件渲染情况,如下:

2.尝试在子组件直接使用父组件的msg
,看看能否显示出数据来

浏览器显示如下:

那么该如何使用呢?
换一个思考的方式,在app
父组件中是可以使用v-bind
方法来设置绑定值的,能否通过v-bind
来绑定msg
到子组件中呢?
3.在父组件中使用 v-bind
来绑定msg
到子组件中,进行传值

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

可以从错误提示看到,使用v-bind
的传递值都是要在子组件进行定义的,不能直接使用。那么是不是在子组件的data
中进行定义呢?
当然不是,子组件有一个特殊的属性props
,专门用来定义父组件传递下来的参数,并且传递下来的参数只能是只读。
4.使用props
定义父组件传递下来的值

浏览器显示如下:

显示已经可以正常显示父组件中,传递下来的值了。那么下面来看看,使用props
定义的值,能否被修改。
5.修改props
定义的值,查看是否会报错

浏览器点击之后,如下:


告警信息如下:
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
定义出来的值才可以。
交流QQ群:

点击下面,查看更多Vue系列文章
原文始发于微信公众号(海洋的渔夫):38. Vue组件传值-父组件向子组件传值
版权声明:本文内容由互联网用户自发贡献,该文观点仅代表作者本人。本站仅提供信息存储空间服务,不拥有所有权,不承担相关法律责任。如发现本站有涉嫌侵权/违法违规的内容, 请发送邮件至 举报,一经查实,本站将立刻删除。
文章由极客之家整理,本文链接:https://www.bmabk.com/index.php/post/32468.html