父子组件传值问题

Vue是个以组件化开发著称的框架:于是组件间传值就经常被用到:

1、父传子:prop,slot

prop只是一个传值,子组件在script的prop中声明后可以直接进行使用

注意:prop传递值不能在子组件进行修改,不然浏览器会报错,需要通过赋值给子组件自身申明的元素才能进行修改

slot(插槽):与prop不同,插槽支持html语句插入以及组件插入,只要在子组件同样写上slot就能成功展示

注意: slot传值在父组件传值之后,在子组件进行使用需要用slot-scope属性进行声明

2、子传父:emit

父组件需要写一个方法用来接收子组件传递出来的数据,而子组件则可以通过$emit('方法米',数据)的方式进行父组件方法的触发和传值

注意:现在新增了一个传值的后缀.sync,通过这个后缀对于简单的状态修改,父组件可以不写方法,直接更新;

<parent :title.sync="title" ></parent>

<children @click="$emit('update:title',新数据)"></children>

如上所示:子组件只要通过updata: 拼接属性名,然后跟着新数据就可以成功更新状态

注意:新的后缀.sync不能与v-bind一起使用,也不能拼接表达式;但是你可以传一个数组进入

最后编辑于
©著作权归作者所有,转载或内容合作请联系作者
【社区内容提示】社区部分内容疑似由AI辅助生成,浏览时请结合常识与多方信息审慎甄别。
平台声明:文章内容(如有图片或视频亦包括在内)由作者上传并发布,文章内容仅代表作者本人观点,简书系信息发布平台,仅提供信息存储服务。

相关阅读更多精彩内容

友情链接更多精彩内容