Vue中用v-model实现父组件和子组件之间的数据通信

最新推荐文章于 2024-06-26 09:20:14 发布

gooodi

最新推荐文章于 2024-06-26 09:20:14 发布

阅读量420

点赞数

CC 4.0 BY-SA版权

分类专栏：记录

本文链接：https://blog.youkuaiyun.com/gooodi/article/details/86530572

记录专栏收录该内容

24 篇文章

订阅专栏

本文深入探讨了Vue框架中日期选择器组件的实现细节，包括如何使用自定义属性和事件来增强其功能，以及如何通过计算属性实现双向数据绑定。文章详细分析了组件的模板结构、脚本逻辑及数据流，为读者提供了丰富的代码实例。

摘要生成于 C知道，由 DeepSeek-R1 满血版支持，前往体验 >

<template>
  <div>
    <span class="injobs" >{{title}}：</span>
    <DatePicker type="month" :placeholder="placeholder" v-model="tt"></DatePicker>
  </div>
</template>

<script>
export default {
  name: "EFMonthSelector",
  model: {
    prop: 'value',
    event: 'throwValue'
  },
  props: {
    title: {
      type: String
    },
    placeholder: {
      type: String
    },
    value: {
      type: Date
    }
  },
  data() {
    return {
      formValidate: {
        start: null
      }
    }
  },
  computed: {
    tt: {
      get: function() {
        return this.value;
      },
      set: function(val) {
        this.$emit('throwValue', val)
      }
    }
  },
  methods: {}
}

</script>