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 相关文章推荐
JavaScript全局函数使用简单说明
Mar 11 Javascript
javascript 运算数的求值顺序
Aug 23 Javascript
javascript操作html控件实例(javascript添加html)
Dec 02 Javascript
jquery实现带二级菜单的导航示例
Apr 28 Javascript
JavaScript设计模式之建造者模式介绍
Dec 28 Javascript
JQuery 两种方法解决刚创建的元素遍历不到的问题
Apr 13 Javascript
怎么引入(调用)一个JS文件
May 26 Javascript
JS之获取样式的简单实现方法(推荐)
Sep 13 Javascript
前端 Vue.js 和 MVVM 详细介绍
Dec 29 Javascript
最新Javascript程序员面试试题和解题方法
Nov 23 Javascript
layui的layedit富文本赋值方法
Sep 18 Javascript
vue实现移动端返回顶部
Oct 12 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
解析php中用PHPMailer来发送邮件的示例(126.com的例子)
2013/06/24 PHP
swoole_process实现进程池的方法示例
2018/10/29 PHP
Laravel Eloquent ORM 实现查询表中指定的字段
2019/10/17 PHP
web前端开发也需要日志
2010/12/09 Javascript
YUI Compressor压缩JavaScript原理及微优化
2013/01/07 Javascript
js获取控件位置以及不同浏览器中的差别介绍
2013/08/08 Javascript
jquery实现简单的banner轮播效果【实例】
2016/03/30 Javascript
js HTML5多媒体影音播放
2016/10/17 Javascript
js实现登录验证码
2016/12/22 Javascript
EasyUI学习之Combobox级联下拉列表(2)
2016/12/29 Javascript
element-ui的回调函数Events的用法详解
2018/10/16 Javascript
JQuery模拟实现网页中自定义鼠标右键菜单功能
2018/11/14 jQuery
vue+vant-UI框架实现购物车的复选框全选和反选功能
2019/11/05 Javascript
vue路由守卫,限制前端页面访问权限的例子
2019/11/11 Javascript
vue中组件通信详解(父子组件, 爷孙组件, 兄弟组件)
2020/07/27 Javascript
vant-ui框架的一个bug(解决切换后onload不触发)
2020/11/11 Javascript
基于Cesium绘制抛物弧线
2020/11/18 Javascript
jQuery实现本地存储
2020/12/22 jQuery
Python 文件处理注意事项总结
2017/04/10 Python
python切片(获取一个子列表(数组))详解
2019/08/09 Python
Python tensorflow实现mnist手写数字识别示例【非卷积与卷积实现】
2019/12/19 Python
Python pysnmp使用方法及代码实例
2020/08/24 Python
pandas抽取行列数据的几种方法
2020/12/13 Python
Dockers美国官方网站:卡其裤、男士服装、鞋及配件
2016/11/22 全球购物
英国殿堂级有机护肤品牌:Rodial
2017/04/17 全球购物
自荐信要包含哪些内容
2013/11/06 职场文书
情侣吵架检讨书
2014/02/05 职场文书
《九色鹿》教学反思
2014/02/27 职场文书
党员创先争优心得体会
2014/09/11 职场文书
2014年工程师工作总结
2014/11/25 职场文书
借款民事起诉状范文
2015/05/19 职场文书
2016大学生求职自荐信范文
2016/01/28 职场文书
《槐乡的孩子》教学反思
2016/02/20 职场文书
教你用Python+selenium搭建自动化测试环境
2021/06/18 Python
Python如何解决secure_filename对中文不支持问题
2021/07/16 Python
Windows Server 2019 域控制器安装图文教程
2022/04/28 Servers