组件v-model

以下是一个简单的示例,展示了如何使用组件和v-model来实现数据的双向绑定:

复制代码
<template>
  <div>
    <custom-input v-model="message"></custom-input>
    <p>输入的内容为: {{ message }}</p>
  </div>
</template>

<script>
  import CustomInput from './CustomInput.vue';
  
  export default {
    components: {
      CustomInput
    },
    data() {
      return {
        message: ''
      }
    }
  }
</script>

// CustomInput.vue

<template>
  <input type="text" :value="value" @input="$emit('input', $event.target.value)">
</template>

<script>
  export default {
    props: ['value']
  }
</script>

在上面的示例中,父组件使用了一个自定义的&lt;custom-input>组件,并使用v-model指令将message数据双向绑定到该组件。

自定义组件中,我们通过接收一个value属性来接收父组件传递的数据,并在输入框中使用该属性。当输入框的值发生变化时,我们通过$emit方法触发了一个名为input的事件,并传递了输入框的新值。父组件监听了该事件,并更新了message数据,从而实现了数据的双向绑定。

最终,我们在父组件中显示了message数据的值,可以看到当输入框的值发生变化时,该值也会相应地更新。

相关推荐
墨渊君39 分钟前
“蒙”出花样!用 CSS Mask 实现丝滑视觉魔法
前端·css
isysc11 小时前
面了一个校招生,竟然说我是老古董
java·后端·面试
huabuyu1 小时前
基于 React + MarkdownIt 的 Markdown 渲染器实践:支持地图标签和长按复制
前端
芦苇Z1 小时前
HTML <a> 标签的 rel 属性全解析:安全、隐私与 SEO 最佳实践
前端·html
在这儿不行1 小时前
Android 15边到边模式
前端
源猿人1 小时前
企业级文件浏览系统的Vue实现:架构设计与最佳实践
前端·javascript·数据可视化
红红大虾1 小时前
Defold引擎中关于CollectionProxy的使用
前端·游戏开发
最后一个农民工1 小时前
vue3实现仿豆包模版式智能输入框
前端·vue.js
xw52 小时前
uni-app中v-if使用”异常”
前端·uni-app