包装一个 VueJs 组件

Question

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

my-page.vue

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

my-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 事件。如果是这样，那么当第三方组件发出 change 时，您将发出 input。

<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>