vue如何在自定义组件中使用v-model

更新时间：2018年05月14日 13:49:25 作者：U-FEX

本篇文章主要介绍了vue如何在自定义组件中使用v-model，小编觉得挺不错的，现在分享给大家，也给大家做个参考。一起跟随小编过来看看吧

v-model指令

所谓的“指令”其实就是扩展了HTML标签功能(属性)。

先来一个组件，不用vue-model，正常父子通信

<!-- parent -->
<template>
<div class="parent">
  <p>我是父亲, 对儿子说： {{sthGiveChild}}</p>
  <Child @returnBack="turnBack" :give="sthGiveChild"></Child>
</div>
</template>
<script>
import Child from './Child.vue';
export default {
  data() {
    return {
      sthGiveChild: '给你100块'
    };
  },
  components: {
    Child
  },
  methods: {
    turnBack(val) {
      this.sthGiveChild = val;
    }
  }
}
</script>

<!-- child -->
<template>
<div class="child">
  <p>我是儿子，父亲对我说： {{give}}</p>
  <a href="javascript:;" rel="external nofollow" rel="external nofollow" rel="external nofollow" @click="returnBackFn">回应</a>
</div>
</template>
<script>
export default {
  props: {
    give: String
  },
  methods: {
    returnBackFn() {
      this.$emit('returnBack', '还你200块');
    }
  }
}
</script>

点击回应后，父亲对儿子说的话变成了儿子的回应。儿子收到的信息也变了，实现通信。

改用v-model

<!-- parent -->
<template>
<div class="parent">
  <p>我是父亲, 对儿子说： {{sthGiveChild}}</p>
  <Child v-model="sthGiveChild"></Child>
</div>
</template>
<script>
import Child from './Child.vue';
export default {
  data() {
    return {
      sthGiveChild: '给你100块'
    };
  },
  components: {
    Child
  }
}
</script>

<!-- child -->
<template>
<div class="child">
  <p>我是儿子，父亲对我说： {{give}}</p>
  <a href="javascript:;" rel="external nofollow" rel="external nofollow" rel="external nofollow" @click="returnBackFn">回应</a>
</div>
</template>
<script>
export default {
  props: {
    give: String
  },
  model: {
    prop: 'give',
    event: 'returnBack'
  },
  methods: {
    returnBackFn() {
      this.$emit('returnBack', '还你200块');
    }
  }
}
</script>

文案虽有不同，但是效果最终是一致的。

看看官方自定义组件的v-model

官方例子https://vuefe.cn/v2/api/#model

有这么一句话：默认情况下，一个组件上的 v-model 会把 value 用作 prop 且把 input 用作 event。

尝试把上边子组件的例子改一下，也是跑的通的

<!-- child -->
<template>
<div class="child">
  <p>我是儿子，父亲对我说： {{value}}</p>
  <a href="javascript:;" rel="external nofollow" rel="external nofollow" rel="external nofollow" @click="returnBackFn">回应</a>
</div>
</template>
<script>
export default {
  props: {
    value: String
  },
  methods: {
    returnBackFn() {
      this.$emit('input', '还你200块');
    }
  }
}
</script>

做一下总结：

如果你懒，不想自己去处理事件，那就用默认的 'value' && 'input' 事件去处理，如果用原生事件的，甚至连model属性也可以省去。

如果你想自己的代码比较明确，区分出自定义事件，那么下面的组合才是你的菜。

prop和event看你自己心情定义，当然要知名见意【尽量避开关键字】

model: {
prop: 'someProp', // 注意，是prop，不带s。我在写这个速记的时候，多写了一个s，调试到怀疑人生
event: 'someEvent'
}
this.$emit('someProp', [returnValueToParent])

以上就是本文的全部内容，希望对大家的学习有所帮助，也希望大家多多支持脚本之家。

您可能感兴趣的文章:

vue
v-model

Vue实现导航栏的显示开关控制
今天小编就为大家分享一篇Vue实现导航栏的显示开关控制，具有很好的参考价值，希望对大家有所帮助。一起跟随小编过来看看吧
2019-11-11
vue devserver及其配置方法
这篇文章主要介绍了vue devserver及其配置方法,本文结合示例代码给大家介绍的非常详细，对大家的学习或工作具有一定的参考借鉴价值，需要的朋友可以参考下
2022-12-12
vue之el-form表单校验以及常用正则详解
这篇文章主要介绍了vue之el-form表单校验以及常用正则，具有很好的参考价值，希望对大家有所帮助。如有错误或未考虑完全的地方，望不吝赐教
2023-05-05
Vue基础教程之条件渲染和列表渲染
Vue会尽可能高效地渲染元素,通常会复用已有元素而不是从头开始渲染。这么做会使Vue变得非常快,下面这篇文章主要给大家介绍了Vue基础教程之条件渲染和列表渲染的相关资料,需要的朋友可以参考下
2021-11-11
Vue项目中实现带参跳转功能
最近做了一个手机端系统，其中遇到了父页面需要携带参数跳转至子页面的问题，现已解决，下面分享一下实现过程，感兴趣的朋友一起看看吧
2021-04-04
Vue+jsPlumb实现连线效果(支持滑动连线和点击连线)
jsPlumb 是一个比较强大的绘图组件，它提供了一种方法，主要用于连接网页上的元素。本文将利用jsPlumb实现连线效果，同时支持滑动连线和点击连线，感兴趣的可以了解一下
2023-01-01
Vue3中引入scss文件的方法步骤
这篇文章主要给大家介绍了关于Vue3中引入scss文件的方法步骤,在实际项目中,各种样式往往有很多重复的情况,为了能够使样式的后续开发和维护更加惬意,将这些共同的代码进行命名然后调用这些变量是一个很好的选择,需要的朋友可以参考下
2023-08-08
Vant的Tabbar标签栏引入自定义图标方式
这篇文章主要介绍了Vant的Tabbar标签栏引入自定义图标方式，具有很好的参考价值，希望对大家有所帮助。如有错误或未考虑完全的地方，望不吝赐教
2022-04-04
vue实现自定义树形组件的示例代码
这篇文章主要介绍了vue实现自定义树形组件的示例代码,本文通过示例代码给大家介绍的非常详细,对大家的学习或工作具有一定的参考借鉴价值,需要的朋友可以参考下
2023-08-08
vue日志之如何用select选中默认值
这篇文章主要介绍了vue日志之如何select选中默认值，具有很好的参考价值，希望对大家有所帮助。如有错误或未考虑完全的地方，望不吝赐教
2022-05-05