资讯专栏INFORMATION COLUMN

父子组件通信爬坑小记录

wslongchen / 2979人阅读

摘要:的大小写事件的名字没有自动化的大小写转换,触发的事件名必须和见提供的事件名完全匹配的情况下才能正常运行。父组件向子组件传参时,无论何种命名方式,必须使用同一名字进行接收。

kebab-case:短横线命名法,多个单词之间使用短横线“-”进行连接,单词全部小写。如:first-name,user-info,create-order。
camelCased:驼峰命名法,第一个单词小写,从第二个单词开始首字母大写。如:fistName,userInfo,createOrder。
PascalCased:帕斯卡命名法,单字之间不能使用空格、“_”和“-”进行连接,命名中所有的单词必须首字母大写。如FirstName、UserInfo、CreateOrder。

props的大小写

父组件在传值的时候可子组件以将变量从短横线式转换为驼峰式,所以在传递参数的时候父组件使用短横线式时,子组件应该将其转换为驼峰式进行接收

parent.vue

childs2.vue


运行结果如下

当父组件中传递的变量为全驼峰式或者其他格式的时候,子组件只需要同名的变量便可进行数据接收。

各种数据类型的动静态props

props: ["size"],
computed: {
normalizedSize: function () {

return this.size.trim().toLowerCase()

}
}
注意在 JavaScript 中对象和数组是通过引用传入的,所以对于一个数组或对象类型的 prop 来说,在子组件中改变这个对象或数组本身将会影响到父组件的状态。

emit的大小写

事件的名字没有自动化的大小写转换,触发的事件名必须和见提供的事件名完全匹配的情况下才能正常运行。

parent.vue


     

child.vue

methods: {
    sayHi(){
        this.$emit("testEmit");
}

虽然我们定义的函数名字为驼峰式的,但是不可以监听到对应的短横线命名的test-emit事件,必须使用testEmit来监听。

总结

组件引用命名时,可以使用同名标签,若为驼峰式命名的情况下,可以使用短横线命名法。如:


子组件向父组件传参时,如果使用短横线命名法,则在props时需要使用响应的驼峰式进行接收,其他格式的命名则用同一名字进行接收。

3.父组件向子组件传参时,无论何种命名方式,必须使用同一名字进行接收。

文章版权归作者所有,未经允许请勿转载,若此文章存在违规行为,您可以联系管理员删除。

转载请注明本文地址:https://www.ucloud.cn/yun/106510.html

相关文章

  • bilibili直播: Vue.js Podcast(小记)~~~

    摘要:我听不太懂了内存管理日后需要解决不应该合并小的请求升级成本可能会有多页面构建工程欢迎社区人士来搞尤大说尽量少用会有副作用值得借鉴的啊勾股建议全局现阶段停留在底层,不能完全解决,还是需要框架 主持人:阴明 virtual dom 然后balabala(走神了- -) 尤小右 服务端渲染:流式渲染v-model用在自定义组件业务逻辑的组建需要可服用的 需要注意父子组件的解耦(不推荐双向绑定...

    浠ラ箍 评论0 收藏0
  • 前端爬坑日记之vue内嵌iframe并跨域通信

    摘要:由于该项目是基于原本的安卓,做的微信,所以原来的使用的页面现在需要在中实现,那就是使用查看了很多很多文档,其中这一篇是很有价值的下面将天的爬坑最终以问答的方式总结如下组件中如何引入如何获取对象以及内的对象如何向内传送信息内如何向外部发送信息 由于该项目是基于原本的安卓app,做的微信h5,所以原来的使用webview的页面现在需要在vue中实现,那就是使用iframe查看了很多很多文档...

    dreambei 评论0 收藏0
  • 前端--iframe爬坑

    摘要:且中没有缓存这些消息。查阅了很多资料,后来发现这又是一坑。在没有加载完成的情况下,消息自然是发不到的。解决办法就是需要的事件写到的事件中,代码如下 1、iframe通信 由于项目中有用到vue嵌入静态页面实现功能,vue页面和普通H5页面通信就是个问题。这篇文章写得很详细https://segmentfault.com/a/11... 但是在开发过程中还是遇到了一些问题,比如:ifra...

    CntChen 评论0 收藏0
  • 前端--iframe爬坑

    摘要:且中没有缓存这些消息。查阅了很多资料,后来发现这又是一坑。在没有加载完成的情况下,消息自然是发不到的。解决办法就是需要的事件写到的事件中,代码如下 1、iframe通信 由于项目中有用到vue嵌入静态页面实现功能,vue页面和普通H5页面通信就是个问题。这篇文章写得很详细https://segmentfault.com/a/11... 但是在开发过程中还是遇到了一些问题,比如:ifra...

    nanchen2251 评论0 收藏0

发表评论

0条评论

最新活动
阅读需要支付1元查看
<