包装VueJs组件

Question

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

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

编辑

基于从伯特我设法输入得到它 上班。每次在第三方组件上更改日期时，都会引发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>