Question

我正在使用第三方datepicker组件。我为这个组件创建了一个包装器，所以我可以设置一些适合我的应用程序的默认值。但是，我在传递模型时遇到了问题。如何确保模型的双向绑定？当我直接使用第三方组件时，一切正常。

my-page.vue

<my-datepicker v-model="from"></my-datepicker>

我-datepicker.vue

<template>
  <thirdparty-datepicker>
    :value="value"
  </thirdparty-datepicker>
</template>
<script>
  export default {
    props: {
      value: {
        value: String
      }
    }
  }
</script>

修改

根据Bert的意见，我设法让它发挥作用。每次在第三方组件上更改日期时，都会引发input事件。所有要做的就是连接该事件并重新发射它。

<template>
  <thirdparty-datepicker>
    :value="value"
    v-on:input="change"
  </thirdparty-datepicker>
</template>
<script>
  export default {
    props: {
      value: {
        value: String
      }
    },
    methods: {
      change (newValue) {
        this.$emit('input', newValue)
      }
    }
  }
</script>

Answer 1

为了在您的自定义组件上支持v-model，您必须accept a value parameter and emit an input event（尽管可以自定义;有关详细信息，请参阅链接）。您的代码只是其中的一部分。您如何实现这将取决于第三方组件的工作方式。

让我们说第三方组件发出change事件。如果确实如此，那么当第三方组件发出input时，您将发出change。

<template>
  <thirdparty-datepicker :value="value" @change="onChange">    
  </thirdparty-datepicker>
</template>
<script>
  export default {
    props: {
      value: {
        value: String
      }
    },
    methods:{
      onChange(newValue){
        this.$emit('input', newValue)
      }
    }
  }
</script>

包装VueJs组件

1 个答案: