Vue | 自定义组件双向绑定基础用法
<template>
<div>
<custom-input v-model="message" />
<p>消息内容是：{{ message }}</p>
</div>
</template>
<script>
import Vue from 'vue';
// 自定义输入组件
Vue.component('custom-input', {
props: ['value'],
template: `<input
:value="value"
@input="$emit('input', $event.target.value)"
/>`
});
export default {
data() {
return {
message: ''
};
}
};
</script>这个例子中，我们创建了一个简单的自定义输入组件custom-input，它接受一个value属性并在内部维护其状态。它通过一个input事件发出新的值，这样就可以使用v-model来实现双向绑定。在父组件中，我们通过v-model="message"将message变量绑定到custom-input组件，实现了数据的双向流动。
评论已关闭