vue 通过下拉框组件学习vue中的父子通讯


Posted in Javascript onDecember 19, 2017

如果说vue组件化开发中第一步应该了解的是什么的话,那无疑是父子组件之间是如何实现通讯的(说白了就是父子组件中数据是如何传递的),只有理解了这一步,才能更好的开发组件

这里先提出两个关键词: props 与 emit :

写这个组件之前,先看看效果图:

vue 通过下拉框组件学习vue中的父子通讯 

组件开发分析:

既然是组件:

  • 首先组件内部数据内容肯定是可变的(如上图中的"按时间排序"之类的),这必须由父组件传入(即父组件如何将数据传个父组件);
  • 在选择了内容之后,如何将数据传出来(即子组件如何将数据传给父组件)

先写结构:

父组件

<!--下拉框父组件-->
<template>
 <div id="app">
  <oSelect @changeOption="onChangeOption" :selectData="selectData"></oSelect>
  <!--
  selectData: 传入父组件需要传入的数据;格式:childDataName="parentDataName";
  onChangeOption: 子组件触发的事件名,通过触发一个事件从而来接收子组件的传过来的数据
  格式:@childEventName="parentEventName"
  注:可写多个
  -->
 </div>
</template>
<script>
import oSelect from "@/components/select.vue"; //引入组件
export default{
 name: 'App',
 data(){
  return {
   selectData: {
    defaultIndex: 0, //默认选中的是第几个
    selectStatus: false, // 通过selectStatus来控制下拉框的显示/隐藏
    selectOptions: [ // 下拉框中的数据 name这样的参数,看项目是否有需求,可自行修改
     {
      name: 'time',
      context: '按时间排序'
     },
     {
      name: 'view',
      context: '按浏览量排序'
     },
     {
      name: 'like',
      context: '按点赞数排序'
     },
     {
      name: 'reply',
      context: '按回复数排序'
     },
     {
      name: 'reward',
      context: '按打赏数排序'
     }
    ]
   }
  }
 },
 methods:{
  onChangeOption(index){
  //子组件通过一个事件来触发onChangeOption方法,从而传递一系列参数,这里的index就是传过来的
   this.selectData.defaultIndex = index;
  //触发过后,动态改变了需要值 
  }
 },
 components: {
  oSelect,
  //注册组件
 }
}
</script>

子组件

<template>
<!-- 下拉框组件html结构(子组件) -->
<div class="select-box" @click="changeStatus">
<!-- changeStatus事件: 点击实现下拉框的显示和隐藏 -->
<h3 class="select-title"
 :name="selectData.selectOptions[selectData.defaultIndex].name"
 :class="{'select-title-active': selectData.selectStatus}"> 
 <!--属性name class的动态绑定-->
 {{ selectData.selectOptions[selectData.defaultIndex].context }} 
 <!--这里主要绑定选择的数据-->
</h3>
<transition name="slide-down">
<!--transition 实现下拉列表显示隐藏时的动画-->
<ul class="select-options" v-show="selectData.selectStatus">
 <li class="select-option-item" 
  v-for="(item,index) in selectData.selectOptions"
  @click="EmitchangeOption(index)"
  :class="{'select-option-active':selectData.defaultIndex===index}">
  <!--
   v-for:循环数据渲染下拉列表
   EmitchangeOption:点击下拉列表事件
   class:动态绑定被选中的数据
  -->
  {{ selectData.selectOptions[index].context }}
  
 </li>
 <div class="arrow-top"></div>
</ul> 
</transition> 
</div> 
</template>
<script>
export default{
 name: 'oSelect', //建议大家都写上这个,有利于我们知道这个组件叫什么名字
 //通过props来接收父组件传过来的数据
 props:{
  selectData: {
  type: Object //规定传过来的数据为对象,否则就会报错(其实这样写就是规避错误和良好的习惯)
  }
 },
 methods:{
  EmitchangeOption(index){
  this.$emit('changeOption',index);
   // 通过点击事件触发EmitchangeOption函数,传入当前点击下拉列表中的索引值index
   // 下拉框通过emit方法触发父组件中changeOption函数,动态传给父组件需要的数据,这里为索引值
  },
  changeStatus(){
   // 通过changeStatus事件动态改变selectStatus的值,从而控制下拉框的显示隐藏
  this.selectData.selectStatus = !this.selectData.selectStatus
  }
 }
}
</script>

总结

  • 从以上的示例可以看出来,父组件传入数据,需要在父组件中线绑定一个属性,挂载需要传入的数据;
  • 子组件接收父组件的数据通过 props 方法来接收;
  • 子组件传递数据需要使用 emit 方法来绑定父组件中事先设定好的方法,从而动态传递操作后需要的数据

最终效果如下:

vue 通过下拉框组件学习vue中的父子通讯 

附上组件中的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;
}
<!--箭头css-->
.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 通过下拉框组件学习vue中的父子通讯,希望对大家有所帮助,如果大家有任何疑问请给我留言,小编会及时回复大家的。在此也非常感谢大家对三水点靠木网站的支持!

Javascript 相关文章推荐
jquery 输入框数字限制插件
Nov 10 Javascript
用js判断页面刷新或关闭的方法(onbeforeunload与onunload事件)
Jun 22 Javascript
jQuery-Tools-overlay 使用介绍
Jul 14 Javascript
javascript if条件判断方法小结
May 17 Javascript
Javascript基础知识(三)BOM,DOM总结
Sep 29 Javascript
Javascript中的方法和匿名方法实例详解
Jun 13 Javascript
Javascript函数式编程语言
Oct 11 Javascript
js绑定事件和解绑事件
Apr 27 Javascript
jQuery实现手势解锁密码特效
Aug 14 jQuery
javascript实现文字无缝滚动效果
Aug 26 Javascript
react build 后打包发布总结
Aug 24 Javascript
关于ligerui子页面关闭后,父页面刷新,重新加载的方法
Sep 27 Javascript
浅谈Vue.js中ref ($refs)用法举例总结
Dec 19 #Javascript
Vue 2.0学习笔记之使用$refs访问Vue中的DOM
Dec 19 #Javascript
jQuery实现弹窗下底部页面禁止滑动效果
Dec 19 #jQuery
基于node.js实现微信支付退款功能
Dec 19 #Javascript
React Native之prop-types进行属性确认详解
Dec 19 #Javascript
响应式框架Bootstrap栅格系统的实例
Dec 19 #Javascript
vue.js element-ui validate中代码不执行问题解决方法
Dec 18 #Javascript
You might like
长波知识介绍
2021/03/01 无线电
php实现的日历程序
2015/06/18 PHP
作为程序员必知的16个最佳PHP库
2015/12/09 PHP
PHP单例模式模拟Java Bean实现方法示例
2018/12/07 PHP
购物车选中得到价格实现示例
2014/01/26 Javascript
javascript 闭包详解
2015/02/15 Javascript
Bootstrap按钮功能之查询按钮和重置按钮
2016/10/26 Javascript
js调用屏幕宽度的简单方法
2016/11/14 Javascript
JavaScript使用简单正则表达式的数据验证功能示例
2017/01/13 Javascript
详解Angular系列之变化检测(Change Detection)
2018/02/26 Javascript
JS实现DOM节点插入操作之子节点与兄弟节点插入操作示例
2018/07/30 Javascript
手把手教你使用TypeScript开发Node.js应用
2019/05/06 Javascript
element表格翻页第2页从1开始编号(后端从0开始分页)
2019/12/10 Javascript
JavaScript 禁止用户保存图片的实现代码
2020/04/28 Javascript
深入了解JS之作用域和闭包
2020/06/16 Javascript
[39:52]2018DOTA2亚洲邀请赛 4.3 突围赛 EG vs Newbee 第一场
2018/04/04 DOTA
python使用cStringIO实现临时内存文件访问的方法
2015/03/26 Python
详解Python编程中基本的数学计算使用
2016/02/04 Python
利用Python如何生成hash值示例详解
2017/12/20 Python
python使用xlrd和xlwt读写Excel文件的实例代码
2018/09/05 Python
解决python3读取Python2存储的pickle文件问题
2018/10/25 Python
python实现求特征选择的信息增益
2018/12/18 Python
将pip源更换到国内镜像的详细步骤
2019/04/07 Python
Django模板Templates使用方法详解
2019/07/19 Python
全面了解django的缓存机制及使用方法
2019/07/22 Python
Python imutils 填充图片周边为黑色的实现
2020/01/19 Python
Python类和实例的属性机制原理详解
2020/03/21 Python
keras slice layer 层实现方式
2020/06/11 Python
Python基于Webhook实现github自动化部署
2020/11/28 Python
新西兰演唱会和体育门票网站:Ticketmaster新西兰
2017/10/07 全球购物
教师工作失职检讨书
2014/09/18 职场文书
党风廉政建设调研报告
2015/01/01 职场文书
2016年优秀团员事迹材料
2016/02/25 职场文书
深入探讨opencv图像矫正算法实战
2021/05/21 Python
php去除deprecated的实例方法
2021/11/17 PHP
Docker下安装Oracle19c
2022/04/13 Servers