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 相关文章推荐
用倒置滤镜把div倒置,再把table倒置。
Jul 31 Javascript
JavaScript实现自己的DOM选择器原理及代码
Mar 04 Javascript
点击隐藏页面左栏或右栏实现js代码
Apr 01 Javascript
使用jquery实现以post打开新窗口
Mar 19 Javascript
innerHTML动态添加html代码和脚本兼容多个浏览器
Oct 11 Javascript
js网页右下角提示框实例
Oct 14 Javascript
AngularJS中取消对HTML片段转义的方法例子
Jan 04 Javascript
Bootstrap弹出框(Popover)被挤压的问题小结
Jul 11 Javascript
基于js原生和ajax的get和post方法以及jsonp的原生写法实例
Oct 16 Javascript
vue-cli如何引入bootstrap工具的方法
Oct 19 Javascript
JavaScript实现Excel表格效果
Feb 07 Javascript
js实现无缝轮播图特效
May 09 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
ThinkPHP标签制作教程
2014/07/10 PHP
php获取twitter最新消息的方法
2015/04/14 PHP
Yii1.1中通过Sql查询进行的分页操作方法
2017/03/16 PHP
原生PHP实现导出csv格式Excel文件的方法示例【附源码下载】
2019/03/07 PHP
Ajax搜索结果页面下方的分页按钮的生成
2012/04/05 Javascript
jQuery.extend()的实现方式详解及实例
2013/06/29 Javascript
js中window.open打开一个新的页面
2014/08/10 Javascript
在JavaScript中重写jQuery对象的方法实例教程
2014/08/25 Javascript
Html5的placeholder属性(IE兼容)实现代码
2014/08/30 Javascript
Egret引擎开发指南之发布项目
2014/09/03 Javascript
jQuery使用animate创建动画用法实例
2015/08/07 Javascript
JavaScript操作URL的相关内容集锦
2015/10/29 Javascript
javascript实现倒计时跳转页面
2016/01/17 Javascript
AngularJS中的API(接口)简单实现
2016/07/28 Javascript
jQuery读取XML文件的方法示例
2017/02/03 Javascript
webpack+vuex+axios 跨域请求数据的示例代码
2018/03/06 Javascript
Vue项目分环境打包的实现步骤
2018/04/02 Javascript
jQuery实现基本淡入淡出效果的方法详解
2018/09/05 jQuery
微信小程序实现一个简单swiper代码实例
2019/12/30 Javascript
[00:53]TI3正赛第三天 DK怒破A队不败金身 现场国旗飘扬热血激昂
2013/08/10 DOTA
Python重新引入被覆盖的自带function
2014/07/16 Python
在pandas中一次性删除dataframe的多个列方法
2018/04/10 Python
python使用pandas处理excel文件转为csv文件的方法示例
2019/07/18 Python
Python 用matplotlib画以时间日期为x轴的图像
2019/08/06 Python
Django 在iframe里跳转顶层url的例子
2019/08/21 Python
TensorFlow命名空间和TensorBoard图节点实例
2020/01/23 Python
Lombok插件安装(IDEA)及配置jar包使用详解
2020/11/04 Python
在Python中字典按值排序的实现方法
2020/11/12 Python
css3隔行变换色实现示例
2014/02/19 HTML / CSS
HTML5 Canvas中使用路径描画二阶、三阶贝塞尔曲线
2015/01/01 HTML / CSS
2014年售票员工作总结
2014/11/19 职场文书
考研英语辞职信
2015/05/13 职场文书
安全教育主题班会教案
2015/08/12 职场文书
Nginx tp3.2.3 404问题解决方案
2021/03/31 Servers
matplotlib画混淆矩阵与正确率曲线的实例代码
2021/06/01 Python
Python中Selenium对Cookie的操作方法
2021/07/09 Python