Vue 如何使用props、emit实现自定义双向绑定的实现


Posted in Javascript onJune 05, 2020

下面我将使用Vue自带的属性实现简单的双向绑定。

下面的例子就是利用了父组件传给子组件(在子组件定义props属性,在父组件的子组件上绑定属性),子组件传给父组件(在子组件使用$emit()属性定义一个触发方法,在父组件上的子组件监听这个事件)。

import Vue from 'vueEsm' 

var Com = {
  name:'Com',
  props:['val'],
  template:`<input type='text' @input='handleInput'/>`,
  methods: {
    handleInput(e){
      this.$emit("input",e.target.value);
    }
  },
}

new Vue({
   el:'#app',
   data() {
     return {
       value:''
     }
   },
   components:{
    Com
   },
   template:`
   <div>
   <Com @input='post' :val='value'></Com>
   </div>
   `,
   methods:{
    post(data){
      this.value=data;
    }
   }
 })

上面这个例子,在input标签上每次输入时触发原生事件input,在这个事件上绑定了一个handleInput方法,事件每次触发都会执行方法里的$emit属性。该属性里面第一个参数可以定义一个事件名,第二个参数可以传一个参数。这里我们把每次输入的值e.target.value传进去。在父组件的子组件上监听这个事件,定义一个post方法,方法的参数就是传入的数据。然后我们在父组件的data属性里定义一个存储值的变量value。将刚才传入的参数赋给这个变量value。最后在父组件的子组件上绑定一个自定义属性,比如val。将value传给val。在子组件定义一个props属性接受这个val。

这个例子对于理解父组件与子组件传值特别重要。

下方举例说明了我的一个自定义mySelect的实现过程:

<template>
 <div class="select">
  <div class="input" @click="collapse=!collapse">
   <span v-if="currentValue">{{currentLabel||currentValue}}</span>
   <span v-else class="placeholder">{{placeholder}}</span>

   <span :class="collapse?'arrow-down':'arrow-up'"></span>
  </div>

  <div class="option-list" v-show="!collapse">
   <div class="option-item" v-for="item in data" :key="item.id" @click="chooseItem(item)">{{item[itemLabel?itemLabel:'name']}}</div>
  </div>
 </div>
</template>

<script>
 export default {
  name: "mySelect",
  props: [
   'value',
   'placeholder',
   'data',
   'itemLabel',
   'itemValue'
  ],
  data() {
   return {
    collapse: true,
    currentValue: '',
    currentLabel: '',
   }
  },
  watch: {
   value: {
    immediate: true,
    handler(value) {
     this.currentValue = value;
     this.$emit('input', value);
     this.data.forEach(item => {
      if (item[this.itemValue ? this.itemValue : 'id'] == value) {
       return this.currentLabel = item[this.itemLabel ? this.itemLabel : 'name'];
      }
     });
    }
   },
   data:{
    immediate: true,
    handler(arr) {
     if(this.value||!this.currentLabel){
      arr.forEach(item=>{
       if(item[this.itemValue ? this.itemValue : 'id'] == this.value){
        this.currentLabel = item[this.itemLabel ? this.itemLabel : 'name'];
        return;
       }
      })
     }
    }
   }
  },
  methods: {
   chooseItem(item) {
    if (this.currentValue !== item[this.itemValue ? this.itemValue : 'id']) {
     this.$emit('change',item[this.itemValue ? this.itemValue : 'id']);
    }
    this.currentValue = item[this.itemValue ? this.itemValue : 'id'];
    this.currentLabel = item[this.itemLabel ? this.itemLabel : 'name'];
    this.$emit('input', this.currentValue);
    this.collapse = true;
   }
  }
 }
</script>

<style lang="scss" scoped>
 .select {
  position: relative;

  .input {
   width: 100%;
   height: 30px;
   line-height: 30px;
   background-color: #fff;
   border: 1px solid #02b4fe;
   border-radius: 0 3px 3px 0;
   padding-left: 10px;
   color: #666;
   position: relative;
   .placeholder {
    color: #aaa;
   }
  }

  .arrow-down {
   width: 0;
   height: 0;
   border-left: 5px solid transparent;
   border-right: 5px solid transparent;
   border-top: 8px solid #02b4fe;
   position: absolute;
   right: 5px;
   top: 10px;
  }

  .arrow-up {
   width: 0;
   height: 0;
   border-left: 5px solid transparent;
   border-right: 5px solid transparent;
   border-bottom: 8px solid #02b4fe;
   position: absolute;
   right: 5px;
   top: 10px;
  }

  .option-list {
   max-height: 200px;
   overflow-y: scroll;
   position: absolute;
   top: 2rem;
   left: 0;
   z-index: 5;
   width: 100%;
   padding: 0 5px;
   font-size: 10px;
   color: #aaa;
   background-color: #fff;
   text-align: left;
   box-shadow: 0 0 5px rgba(0, 0, 0, .1);
   border: 1px solid rgb(79, 192, 232);

   .option-item {
    text-align: center;
    line-height: 1.5rem;
   }
  }
 }
</style>

如上所示,当声明了mySelect组件之后,在项目中实际使用时,就可以如下所示直接使用:

<template>
 <mySelect v-model="testValue" placeholder="请选择" :data="testArr" item-label="id"
           item-value="name"></mySelect>
</template>
<script>
  import mySelect from './mySelect'
  
  export default{
    components:{
     mySelect
    },
     data(){
      return {
         testValue:'',
         testArr:[]
       }
     },
     mounted(){
      //预置select的下拉选择基础数据,数据为对象数组,包含id和name属性
     }
}
</script>

以上就是一个简单的自定义双向绑定组件的实现,包括简单的使用过程。在vue中的自定义组件,关于props的声明时,还是尽量使用官方建议的对象方式,可以声明属性的默认值和数据类型。我这边偷懒了用的是props的字符串数组简写方式,但是这样的话对使用组件时的错误调试不利。所以,尽量不要学我偷懒噢,亲~~~

到此这篇关于Vue 如何使用props、emit实现自定义双向绑定的实现的文章就介绍到这了,更多相关Vue props、emit实现自定义双向绑定内容请搜索三水点靠木以前的文章或继续浏览下面的相关文章希望大家以后多多支持三水点靠木!

Javascript 相关文章推荐
javascript 动态参数判空操作
Dec 22 Javascript
JQuery的Validation插件中Remote验证的中文问题
Jul 26 Javascript
关于跨站脚本攻击问题
Dec 22 Javascript
JS实现的网页倒计时数字时钟效果
Mar 02 Javascript
JQUERY简单按钮轮换选中效果实现方法
May 07 Javascript
JS判断输入字符串长度实例代码(汉字算两个字符,字母数字算一个)
Aug 02 Javascript
微信小程序 wx:for的使用实例详解
Apr 27 Javascript
vue快捷键与基础指令详解
Jun 01 Javascript
JavaScript实现鼠标滚轮控制页面图片切换功能示例
Oct 14 Javascript
如何选择适合你的JavaScript框架
Nov 20 Javascript
AngularJS监听ng-repeat渲染完成的方法
Mar 20 Javascript
Vue项目服务器部署之子目录部署方法
May 12 Javascript
VueX模块的具体使用(小白教程)
Jun 05 #Javascript
Vuex的热更替如何实现
Jun 05 #Javascript
2分钟实现一个Vue实时直播系统的示例代码
Jun 05 #Javascript
Vue 封装防刷新考试倒计时组件的实现
Jun 05 #Javascript
webpack 如何同时输出压缩和未压缩的文件的实现步骤
Jun 05 #Javascript
vue使用nprogress加载路由进度条的方法
Jun 04 #Javascript
JS+canvas五子棋人机对战实现步骤详解
Jun 04 #Javascript
You might like
php json转换成数组形式代码分享
2014/11/10 PHP
PHP中配置IIS7实现基本身份验证的方法
2015/09/24 PHP
大家都应该掌握的PHP关联数组使用技巧
2015/12/25 PHP
ThinkPHP的常用配置选项汇总
2016/03/24 PHP
jQuery ui 1.7更新小结
2009/08/15 Javascript
HTML中的setCapture和releaseCapture使用介绍
2012/03/21 Javascript
深入探究AngularJS框架中Scope对象的超级教程
2016/01/04 Javascript
微信小程序左滑删除效果的实现代码
2017/02/20 Javascript
BootStrap注意事项小结(五)表单
2017/03/10 Javascript
JavaScript中双符号的运算详解
2017/03/12 Javascript
JavaScript面试出现频繁的一些易错点整理
2018/03/29 Javascript
vue实现点击当前标签高亮效果【推荐】
2018/06/22 Javascript
bootstrapTable+ajax加载数据 refresh更新数据
2018/08/31 Javascript
mpvue写一个CPASS小程序的示例
2018/09/04 Javascript
快速解决vue动态绑定多个class的官方实例语法无效的问题
2018/09/05 Javascript
用jQuery将JavaScript对象转换为querystring查询字符串的方法
2018/11/12 jQuery
Vuex,iView UI面包屑导航使用扩展详解
2019/11/04 Javascript
vue中的过滤器及其时间格式化问题
2020/04/09 Javascript
three.js 如何制作魔方
2020/07/31 Javascript
vue设置默认首页的操作
2020/08/12 Javascript
Vue Element校验validate的实例
2020/09/21 Javascript
Python实现Linux下守护进程的编写方法
2014/08/22 Python
python导出chrome书签到markdown文件的实例代码
2017/12/27 Python
Python使用re模块正则提取字符串中括号内的内容示例
2018/06/01 Python
Pandas_cum累积计算和rolling滚动计算的用法详解
2019/07/04 Python
python实现点击按钮修改数据的方法
2019/07/17 Python
使用Python实现图像标记点的坐标输出功能
2019/08/14 Python
如何实现更换Jupyter Notebook内核Python版本
2020/05/18 Python
五分钟学会HTML5的WebSocket协议
2019/11/22 HTML / CSS
得到Class的三个过程是什么
2012/08/10 面试题
杭州联环马网络笔试题面试题
2013/08/04 面试题
小学运动会入场式解说词
2014/02/18 职场文书
优秀乡村医生先进事迹材料
2014/08/23 职场文书
2015年社区党务工作总结
2015/04/21 职场文书
环保建议书作文500字
2015/09/14 职场文书
不同品牌、不同型号对讲机如何互相通联
2022/02/18 无线电