父子组件通信爬坑小记录

wslongchen 发布于2019-08-26 10:38 / 2885人阅读

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

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用在自定义组件业务逻辑的组建需要可服用的需要注意父子组件的解耦（不推荐双向绑定...

浠ラ箍 2019-08-19 18:18 评论0 收藏0
前端爬坑日记之vue内嵌iframe并跨域通信

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

dreambei 2019-08-23 11:42 评论0 收藏0
前端--iframe爬坑记录

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

CntChen 2019-08-23 13:10 评论0 收藏0
前端--iframe爬坑记录

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

nanchen2251 2019-08-02 12:01 评论0 收藏0