vue怎么自定义和使用开关组件

这篇“Vue怎么自定义和使用开关组件”文章的知识点大部分人都不太理解，所以小编给大家总结了以下内容，内容详细，步骤清晰，具有一定的借鉴价值，希望大家阅读完这篇文章能有所收获，下面我们一起来看看这篇“vue怎么自定义和使用开关组件”文章吧。

switch.vue：

<template>  <div class="disLB">    <div class="switch disLB" @click="toggleSwitch" :class="isOpen?'switch-on':''">      <span class="disB switch-circle" :class="isOpen?'on':''"></span>    </div>      </div></template><script>export default {  data() {    return {      // isOpen: false    }  },  props: ["isOpen"],  methods: {    toggleSwitch() {      // 子组件不能直接修改父组件的数据，要通过$emit      this.$emit('changeSwitch')    }  }  }</script><style lang="less" scoped>  .switch {    position: relative;    border-radius: 20px;    border: 1px solid #dfdfdf;    width: 45px;    height: 23px;    .switch-circle {      position: absolute;      width: 21px;      height: 21px;      background-color: #fff;      border-radius: 50%;      border: 1px solid #dfdfdf;      box-shadow: 0 1px 1px #ccc;    }    .on {      right: 0;      // background-color: #64bd63;      border-color: #64bd63;      transfORM: translate(X);      transition: transform 0.5s, right 0.5s;    }  }  .switch-on {    background-color: #64bd63;  }</style>

在父组件中引入并传值使用：

<template>    <toggle-switch :isOpen="systemConfig.enable_email" @changeSwitch="changeSwitch" v-model="systemConfig.enable_email"></toggle-switch></template><script>import toggleSwitch from '../../components/switch.vue';export default {    data() {        return {}    },    components: {        toggleSwitch    },    methods: {        changeSwitch() {          this.systemConfig.enable_email = !this.systemConfig.enable_email;        }    }}

效果图：

注：

父组件向子组件传值，可以直接通过:isOpen="systemConfig.enable_email"传递数据，子组件通过 prop 接收数据：props: ["isOpen"],；
但子组件不能直接修改父组件的数据，可以通过 $emit 调用父组件的方法来修改父组件的数据，$emit 的第一个参数要与父组件 @ 后的名称保持一致。

以上就是关于“vue怎么自定义和使用开关组件”这篇文章的内容，相信大家都有了一定的了解，希望小编分享的内容对大家有帮助，若想了解更多相关的知识内容，请关注编程网精选频道。