vue封装高级组件

---

v-model

如果是单向数据流的话，一般用props和$emit就够了。复杂一点的组件，有时候希望数据可以双向联动，子组件也可以直接更改父组件上的数据。这时候可以在自定义组件上使用v-model进行数据的双向绑定

勾选框组件

//调用时 checkbox=false
<check-box v-model="checkbox" ></check-box>

子组件代码如下

<template>
  <div>
    <input type="checkbox" :checked='checkFlag' @change="$emit('change', $event.target.checked)">勾选协议
    <p>{
  {checkFlag}}</p>
  </div>
</template>
<script>
export default {
model:{
    prop:'checkFlag',//命名绑定的model值名字
    event:'change'//当勾选时,触发change事件,change事件改变checkFlag的值
  },
  props:{
    checkFlag:Boolean
  }
}
</script>

当点击勾选框时,触发change事件,勾选框的监听到值的变化,将数据通过change事件emit