vue 自定义组件使用v-model
第一种实现方法
1. 使用
<my-component v-model="content" @sub="handleSubmit"></my-component>
2. my-component组件
<template> <div> <input v-model="demo" /> <button @submit="sub"></button> </div> </template> <script> export default { props: { content: { type: Boolean, default: false } }, data() { return { demo: '' } }, methods: { sub() { this.$emit('input', this.demo) this.$emit('sub') } } } </script>第二种 (极简实现,组件无需定义变量)
使用方式:
<my-component v-model="content"></my-component>
my-component实现
<input :value="value" @input="$emit('input', $event.target.value)"/>
- 上一篇 »[Vue源码分析] v-model实现原理
- 下一篇 »vue自定义指令属性注解