我有一个用 Vue.js 开发的自定义组件。该组件是一个包装器,可以在给定每个参数的参数的情况下动态创建另一个组件。
我遇到的问题是,当使用该动态组件的 v-model 并将其链接到父视图的模型时,不会发送该值。
父视图
<component-wrapper v-model="wrapperValue" v-bind:childElement="{
elementTag: 'b-form-input',
childProps: {
attrs: {
id: 'foo'
},
}
}"/>
<p style="clear:both;">Wrapper value: {{wrapperValue}}</p>
组件包装器.js
<script lang="ts">
import Vue from 'vue';
export default Vue.component('component-wrapper', {
render: function(createElement) {
return createElement(this.childElement.elementTag, this.childElement.childProps);
},
data() {
return {
};
},
mounted: function() {
},
props: {
childElement: Object,
},
methods: {
}
});
</script>
要修改通过 v-model 传递的属性,您必须使用
$emit(event, value)
.请记住,
v-model="variable"
这只是表达的简写方式:如您所见,父组件期望子组件发出输入事件(默认)并将其变量属性value属性(默认) 绑定到子组件。
如果您希望事件的名称或绑定到子组件的属性与默认名称不同,但仍然可以使用v-model,则必须在子组件的模型属性中声明它们的名称:
这里有一个示例,如您所见,我们可以毫无问题地修改父组件的属性值,但是对于从子组件到父组件的通信,必须启动一个事件: