包装VueJs组件
问题描述:
我正在使用第三方datepicker组件。我为这个组件创建了一个包装,所以我可以设置一些适合我的应用程序的默认值。但是,我在传递模型时遇到问题。如何确保我的模型的双向绑定?当我直接使用第三方组件时,一切正常。包装VueJs组件
我-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>
答
为了支持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>
+0
我在文档中阅读过这样的内容,但我可以真正理解它。你的解释有诀窍。谢谢! – Thijs
您是否尝试给该属性使用与“value”不同的名称?也许这是搞砸的事情。 – Potray
值是datepicker具有的属性之一。我基本上创建一个ono到第三方datepicker和我的包装的属性的地图。如果我理解正确,value是与''v-model =“from''匹配的属性名称? – Thijs