自定义v-model组件,二次封装el-switch组件

原理：参考官网https://cn.vuejs.org/v2/guide/components-custom-events.html#%E8%87%AA%E5%AE%9A%E4%B9%89%E7%BB%84%E4%BB%B6%E7%9A%84-v-model

// v-model是:value="msg" 和 @input="msg=$event.target.value" 的语法糖，
// 其中:value="msg"是绑定了数据，value就是input输入框里的值；
// @input="msg=$event.target.value"就是监听input输入框里值的变化，然后改变值。
// 一句话概括就是，绑定数据并且监听数据改变

<input v-model="msg" /> 
<input :value="msg"  @input="msg=$event.target.value" /> 
// 上面两种写法是等价的

自定义实现

v-model是直接绑定在input上面的，但是如果写一个组件，怎么把组件的值绑定到父组件给它绑定的值上面了，要知道，element-ui是实现了的，譬如element-ui里面的一个组件

<el-radio v-model="radio" label="1">备选项</el-radio>
<el-switch v-model="value" />

实现方式：

<template>
  <!-- 眼睛switch开关 -->
  <div class="switch-btn-wrapper">
    <img v-if="checked" src="./eye_open.png" alt="" />
    <img v-else src="./eye_close.png" alt="" />
    <el-switch class="switch-btn" v-model="checked" size="small"> </el-switch>
  </div>
</template>

<script>
export default {
  name: "EyeSwitch",
  props: {
    value: Boolean,
  },
  model: {
    prop: "value",
    event: "change",
  },
  data() {
    return {
      checked: this.value, //因为直接使用value会警告，所以把值传给组件自己的变量checked
    };
  },
  watch: {
    checked(val) {
      this.$emit("change", val);
    },
  },
};
</script>

<style lang="less" scoped>
.switch-btn-wrapper {
  position: relative;
  width: 20px;
  height: 20px;
  img {
    width: 100%;
    height: 100%;
  }
  .switch-btn {
    position: absolute;
    top: 0;
    left: 0;
    width: 100%;
    height: 100%;
    opacity: 0; // 用真正的switch接收点击事件，但是透明不可见
  }
}
</style>

父组件中使用

<template>
    <EyeSwitch
       v-model="checked"
       @change=" (v) => { console.log(v) } "
    />
</template>
<script>
import EyeSwitch from "./EyeSwitch.vue";
export default {
  name: "Parent",
  data() {
    return {
      checked: false
    };
  },
  components: {
    EyeSwitch
  },
};
</script>

参考文章：https://blog.csdn.net/weixin_43900374/article/details/121536611