怎么在vue中实现一个父子通讯功能-创新互联
本文章向大家介绍怎么在vue中实现一个父子通讯功能的基本知识点总结和需要注意事项,具有一定的参考价值,需要的朋友可以参考一下。
让客户满意是我们工作的目标,不断超越客户的期望值来自于我们对这个行业的热爱。我们立志把好的技术通过有效、简单的方式提供给客户,将通过不懈努力成为客户在信息化领域值得信任、有价值的长期合作伙伴,公司提供的服务项目有:申请域名、虚拟主机、营销软件、网站建设、大竹网站维护、网站推广。为什么要使用Vue
Vue是一款友好的、多用途且高性能的JavaScript框架,使用vue可以创建可维护性和可测试性更强的代码库,Vue允许可以将一个网页分割成可复用的组件,每个组件都包含属于自己的HTML、CSS、JavaScript,以用来渲染网页中相应的地方,所以越来越多的前端开发者使用vue。
父组件
子组件
{{ selectData.selectOptions[selectData.defaultIndex].context }}
- {{ selectData.selectOptions[index].context }}
总结
从以上的示例可以看出来,父组件传入数据,需要在父组件中线绑定一个属性,挂载需要传入的数据;
子组件接收父组件的数据通过 props 方法来接收;
子组件传递数据需要使用 emit 方法来绑定父组件中事先设定好的方法,从而动态传递操作后需要的数据
最终效果如下:
附上组件中的css,仅供参考:
.select-box{ position: relative; max-width: 250px; line-height: 35px; margin: 50px auto; } .select-title{ position: relative; padding: 0 30px 0 10px; border: 1px solid #d8dce5; border-radius: 5px; transition-duration: 300ms; cursor: pointer; } .select-title:after{ content: ''; position: absolute; height: 0; width: 0; border-top: 6px solid #d8dce5; border-left: 6px solid transparent; border-right: 6px solid transparent; right: 9px; top: 0; bottom: 0; margin: auto; transition-duration: 300ms; transition-timing-function: ease-in-out; } .select-title-active{ border-color: #409eff; } .select-title-active:after{ transform: rotate(-180deg); border-top-color: #409eff; } .select-options{ position: absolute; padding:10px 0; top: 45px; border:1px solid #d8dce5; width: 100%; border-radius: 5px; } .select-option-item{ padding:0 10px; cursor: pointer; transition-duration: 300ms; } .select-option-item:hover,.select-option-active{ background: #f1f1f1; color: #409eff; } .arrow-top{ position: absolute; height: 0; width: 0; top: -7px; border-bottom: 7px solid #d8dce5; border-left: 7px solid transparent; border-right: 7px solid transparent; left: 0; right: 0; margin: auto; z-index: 99; } .arrow-top:after{ content: ''; position: absolute; display: block; height: 0; width: 0; border-bottom: 6px solid #fff; border-left: 6px solid transparent; border-right: 6px solid transparent; left: -6px; top: 1px; z-index: 99; } .slide-down-enter-active,.slide-down-leave{ transition: all .3s ease-in-out; transform-origin:0 top; transform: scaleY(1); } .slide-down-enter{ transform: scaleY(0); } .slide-down-leave-active{ transition: all .3s ease-in-out; transform-origin:0 top; transform: scaleY(0); }
以上就是小编为大家带来的怎么在vue中实现一个父子通讯功能的全部内容了,希望大家多多支持创新互联成都网站设计公司!
另外有需要云服务器可以了解下创新互联scvps.cn,海内外云服务器15元起步,三天无理由+7*72小时售后在线,公司持有idc许可证,提供“云服务器、裸金属服务器、高防服务器、香港服务器、美国服务器、虚拟主机、免备案服务器”等云主机租用服务以及企业上云的综合解决方案,具有“安全稳定、简单易用、服务可用性高、性价比高”等特点与优势,专为企业上云打造定制,能够满足用户丰富、多元化的应用场景需求。
新闻名称:怎么在vue中实现一个父子通讯功能-创新互联
转载注明:http://scyanting.com/article/ddecpc.html