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

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

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.js" // 引入模板对应的js
        export default test_refer;
</script>

test_refer.js //单独拆出来的一个js文件,：

export default {//这里的东西，我们称为组件
  data() {
    return { msg: 'haha!'}
  },
  /**
   * vue提供model属性让我们在组件内部就可以调用到其父级的事件，
   * 当前父级事件是固定写法event:"zhangwuji",这个prop:"ychecked"是
   * 将父级的cstChecked赋值给ychecked，然后再传给props:{ychecked:Number}
   * */
  model:{
    prop:'ychecked', // ychecked与父级cstChecked联动
    event:"zhangwuji" // 事件名随便定义，叫张无忌都可以，反正有了model后就可以触发父组件的事件了，zhangwujijt
  },
  props:{
    ychecked:Number // 父级cstChecked传进来会默认赋值给了model{prop:"ychecked"},ychecked再把值赋给props:{ ychcked:Number }
  }
  ,
  methods:{
    mychange:function($event){ // mychange由checkbox元素的原生事件触发 如change、blur、focus、click
      var number = 0;
      if($event.target.checked){ // $event.target.checked得到原生checkbox的布尔值
          number = 1;
      }
      /**
       * vue自带的$emit方法是专门用来触发父级事件的，如父级：<cst-test v-model="cstChecked"></cst-test> ，此处v-model 跟上面的定义model有关联，
       * 当zhangwuji事件触发后会默认把值传给prop:'ychecked'，从而改变了在父级传入的变量cstChecked
       * */
      this.$emit('zhangwuji',number)
    }
  }
}

Brief summary:

以上就是完整示例，组装好就可以运行了。

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

猜你喜欢