怎么在vue中实现一个父子通讯功能 - 行业资讯 - 肥雀云

　　介绍

本文章向大家介绍怎么在vue中实现一个父子通讯功能的基本知识点总结和需要注意事项,具有一定的参考价值,需要的朋友可以参考一下。

为什么要使用vue

vue是一款友好的,多用途且高性能的JavaScript框架,使用vue可以创建可维护性和可测试性更强的代码库,vue允许可以将一个网页分割成可复用的组件,每个组件都包含属于自己的HTML, CSS, JavaScript,以用来渲染网页中相应的地方,所以越来越多的前端开发者使用vue。

<强>父组件

& lt; !——下拉框父组件——比; 　　& lt; template> 　　,& lt; div id=癮pp"比; 　　& lt;才能oSelect @changeOption=皁nChangeOption",: selectData=皊electData"祝辞& lt;/oSelect> 　　& lt; !——才能　　,,selectData:传入父组件需要传入的数据,格式:childDataName=皃arentDataName"; 　　,,onChangeOption:子组件触发的事件名,通过触发一个事件从而来接收子组件的传过来的数据　　格才能式:@childEventName=皃arentEventName" 　　注:可才能写多个　　,才能在　　,& lt;/div> 　　& lt;/template> 　　& lt; script> 　　import oSelect 得到“@/组件/select.vue",//引入组件　　export 默认{ 　　,名字:& # 39;应用# 39; 　　,数据(){ 　　return {才能　　,,,selectData: { 　　,,,defaultIndex:, 0,,//默认选中的是第几个　　,,,selectStatus:,假的,,//,通过selectStatus来控制下拉框的显示/隐藏　　,,,selectOptions:,,//下拉框中的数据,名字这样的参数,看项目是否有需求,可自行修改　　,,,,{ 　　,,,,,名字:,& # 39;时间# 39; 　　,,,,,背景:,& # 39;按时间排序& # 39; 　　,,,,}, 　　,,,,{ 　　,,,,,名字:,& # 39;视图# 39; 　　,,,,,背景:,& # 39;按浏览量排序& # 39; 　　,,,,}, 　　,,,,{ 　　,,,,,名字:,& # 39;像# 39; 　　,,,,,背景:,& # 39;按点赞数排序& # 39; 　　,,,,}, 　　,,,,{ 　　,,,,,名字:,& # 39;回复# 39; 　　,,,,,背景:,& # 39;按回复数排序& # 39; 　　,,,,}, 　　,,,,{ 　　,,,,,名字:,& # 39;奖励# 39; 　　,,,,,背景:,& # 39;按打赏数排序& # 39; 　　,,,,} 　　,,,) 　　,,} 　　,,} 　　}, 　　,方法:{ 　　onChangeOption才能(指数){//子才能组件通过一个事件来触发onChangeOption方法,从而传递一系列参数,这里的指数就是传过来的　　,,this.selectData.defaultIndex =,指数;//触才能发过后,动态改变了需要值, 　　,,} 　　}, 　　,组件:{ 　　oSelect才能,//才能注册组件　　,} 　　} 　　& lt;/script>

<强>子组件

& lt; template> 　　& lt; !——,下拉框组件html结构(子组件),——比; 　　& lt; div 类=皊elect-box", @click=癱hangeStatus"比; 　　& lt; !——, changeStatus事件:,点击实现下拉框的显示和隐藏,——比; 　　& lt; h4 类=皊elect-title" 　　,:name=皊electData.selectOptions [selectData.defaultIndex] .name" 　　,:类=皗& # 39;select-title-active& # 39;:, selectData.selectStatus}“祝辞, 　　,& lt; !——属性name 类的动态绑定——比; 　　,{{,selectData.selectOptions [selectData.defaultIndex] .context }}, 　　,& lt; !——这里主要绑定选择的数据——比; 　　& lt;/h4> 　　& lt; transition name=皊lide-down"祝辞　　& lt; !——transition 实现下拉列表显示隐藏时的动画——比; 　　& lt; ul 类=皊elect-options", v-show=皊electData.selectStatus"比; 　　,& lt; li 类=皊elect-option-item", 　　v代表才能=?项目,索引),拷贝selectData.selectOptions" 　　@click才能=癊mitchangeOption(指数)“; 　　,,:类=皗& # 39;select-option-active& # 39;: selectData.defaultIndex===指数}“比; 　　& lt; !——才能　　,,v代表:循环数据渲染下拉列表　　,,EmitchangeOption:点击下拉列表事件　　,,类:动态绑定被选中的数据　　,才能在　　,,{{,selectData.selectOptions(指数).context }} 　　,, 　　,& lt;/li> 　　,& lt; div 类=癮rrow-top"祝辞& lt;/div> 　　时间/ul> & lt; 　　时间/transition> & lt; 　　时间/div> & lt; 　　& lt;/template> 　　& lt; script> 　　export 默认{ 　　,名字:& # 39;oSelect& # 39;,,//建议大家都写上这个,有利于我们知道这个组件叫什么名字　　,//通过道具来接收父组件传过来的数据　　,道具:{ 　　,,selectData: { 　　类型:才能,Object //规定传过来的数据为对象,否则就会报错(其实这样写就是规避错误和良好的习惯) 　　,,} 　　}, 　　,方法:{ 　　EmitchangeOption才能(指数){ 　　美元。才能发出(& # 39;changeOption& # 39;,指数);//,,,通过点击事件触发EmitchangeOption函数,传入当前点击下拉列表中的索引值指数//,,,下拉框通过发出方法触发父组件中changeOption函数、动态传给父组件需要的数据,这里为索引值　　,,}, 　　changeStatus才能(){//,,,通过changeStatus事件动态改变selectStatus的值,从而控制下拉框的显示隐藏　　,this.selectData.selectStatus =, ! this.selectData.selectStatus 　　,,} 　　,} 　　} 　　null 　　null 　　null 　　null 　　null 　　null 　　null 　　null 　　null 　　null 　　null 　　null 　　null 　　null 　　null 　　null 　　null 　　null 　　null 　　null 　　null 　　null 　　null 　　null 　　null 　　null 　　null 　　null 　　null 　　null 　　null 　　null 　　null 　　null 　　null 　　null 　　null 　　null 　　null 　　null 　　null 　　null 　　null 　　null 　　null 　　null 　　null 　　null 　　null 　　null 　　null 　　null 　　null 　　null 　　null 　　null 　　null 　　null 　　null 　　null 　　null 　　null 　　null 　　null 　　null 　　null 　　null 　　null 　　null 　　null 　　null 　　null 　　null 　　null 　　null 　　null 　　null 　　null 　　null 　　null 　　null 　　null 　　null 　　null 　　null 　　null 　　null 　　null 　　null 　　null 　　null 　　null 　　null 　　null