vue2.0自定义组件的v-model原理详解，model的定义

最新推荐文章于 2025-10-05 15:06:03 发布

原创

最新推荐文章于 2025-10-05 15:06:03 发布 · 5.5k 阅读

4 ·

CC 4.0 BY-SA版权

本文详细讲解Vue2.0中自定义组件如何实现v-model的原理，通过实例展示父级组件（a.vue）如何通过data属性（如cstChecked）与子级组件（b.vue）进行数据交互，子组件借助外部js文件（test_refer.js）来完成模型定义。

以下示例是用单页面的形式写的。

a.vue // a.vue是父级引用组件b.vue

<template>

<!--
    这儿是组件的父级，也就是组件的实例。实例本来应该定义事件来监听子组件的一切“异动”，
    但v-model呢却是给组件内部加个model:{prop:"自定义",event:"自定义"}来监听子组件的变化
-->
     <cst-test v-model="cstChecked"></cst-test>
     cstChecked：{
 
 { cstChecked }}
</template>

js里引入

import cstTest from "@/components/tcctest/tcctest_index.vue"

定义变量：data:{cstChecked :0}

注册组件：components:{cstTest }

b.vue // 组件文件,b.vue引入test_refer.js

<template> 
        <div>
          <label><input type="checkbox" :checked="ychecked" @click="mychange($event)"/> 勾我吧</label>
        </div>
</template>

<style>
</style>
<script>
  import test_refer from "./test_refer.j