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