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> 

EDIT

それを得る 働く第三者コンポーネントで日付が変更されるたびに、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

（それはカスタマイズすることができますが、詳細については、リンクを参照してください）accept a value parameter and emit an input eventにあなたが持っているカスタムコンポーネントのv-modelをサポートするために。あなたのコードはその一部だけをしています。それを実装する方法は、第三者コンポーネントがどのように動作するかに依存します。

第三者コンポーネントが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>