v-model结合model与props在复选框组件上实现双向绑定（本人习惯用单文件组件）

最新推荐文章于 2024-08-22 16:00:18 发布

LUCKY_IT

最新推荐文章于 2024-08-22 16:00:18 发布

阅读量641

点赞数

本文链接：https://blog.csdn.net/LUCKY_IT/article/details/109599532

版权

本文介绍如何使用v-model、model和props在Vue的单文件组件中实现复选框的双向数据绑定，通过示例代码展示具体实现过程。

摘要由CSDN通过智能技术生成

v-model结合model与props在复选框组件上实现双向绑定（本人习惯用单文件组件）

直接上代码

//这是父组件的代码
<template>
  <div class="homeView">
    <base-checkbox v-model="study"></base-checkbox>
  </div>
</template>

<script>
//引入子组件
  import BaseCheckbox from './BaseCheckbox'

  export default {
    name: "HomeView",
    //注册子组件
    components: {
      BaseCheckbox
    },
    data() {
      return {
      //定义v-model属性初值，false即，开始为非选中状态，
        study: false
      }
    },
    created() {
      this.$nextTick( () => {
        console.log(this.study);
      })
    },
    watch: {
      study: {
        handler: function (study) {
          if (study) {
            console.log("此时是选中状态，study值为：" + study)
          }else {
            console.log("此时是非选中状态，study值为：" + study)
          }
        },