Vue2:处理多子道具与模型的同步 [英] Vue2: handling multi-child prop synchronization with models
问题描述
我是 Vue 的新手(大约一个，虽然阅读文档非常有帮助，但通常情况下我无法推导出我应该如何实现所需的行为.
我制作了几个小组件来感受传递道具和处理事件的感觉，所以现在我正在尝试制作一些更大的东西，但面临一些困难.
这个困难源于以下几点:
我想要一个通过 v-for 循环初始化的自定义选择组件.一直以来，我都希望能够访问这些组件的选定选项.我可以在 select 组件中使用 v-model 绑定选择数据，但我正在努力将这些信息传递给包装器，但只有容器在包装器上循环.
注意:我使用的是 Rollup 和单文件组件
顶级
<div><选择容器v-for="(select, index) in selects":index="索引":key="select.id":select.sync="选择"/></模板><脚本>从'./select-container.vue'导入selectContainer；导出默认{组件:{选择容器}，道具: {记录: {默认值:function(){return{}}，类型:对象}},数据:函数(){返回 {选择:[{}, {}]}},计算:{},方法: {}}<样式范围></风格>
选择容器
<div><我的选择v-model.sync="选择"/></模板><脚本>从 './my-select.vue' 导入 mySelect；导出默认{组件:{ mySelect },道具: {索引:{类型:数字}，选择: {类型:对象，默认值:function(){return{}}}},数据:函数(){返回 {}},方法: {},计算:{}}<样式范围></风格>
我的选择
<select v-model="selected"><选项v-for="(attr, index) 在属性中":值=属性":selected="attr == 选择">{{属性}}</选项></选择></模板><脚本>导出默认{道具: {属性: {类型:数组，默认值:函数(){返回 []}}},数据:函数(){返回 {已选择:"}}}<样式范围></风格>帖子中仍有很多代码我没有遵循，但我认为您的问题的要点是如何将 selected 属性从 value 并发出 input 事件.
在模板中，为原生
然后，在代码中，将该事件反映给父级.还要确保接受来自该父级的 value 属性.
出口默认{道具: {值:空，},数据:函数(){返回 {选择:this.value}},方法: {onInput() {this.$emit("输入", this.selected)}},手表: {价值(新价值){this.selected = newValue;}}}然后父级可以简单地使用传统的 v-model 绑定.
I'm new to Vue (about a, and while reading the docs is very helpful it is often the case where I can not derive how I am supposed to achieve the desired behavior.
I have made several small components to get the feel for passing props and handling events, so now I am trying to makes something a bit larger but am facing some difficulty.
This difficulty stems from the following:
I would like to have a custom select component that are initialized via a v-for loop. All the while I would like to have access to these components selected option. I can bind the select data with v-model in the select component, but I am struggling to get that information out to the wrapper, yet alone the container looping over the wrappers.
Note: I am using Rollup and single file components
top-level
<template >
<div>
<select-container
v-for="(select, index) in selects"
:index="index"
:key="select.id"
:select.sync="select"
/>
</div>
</template>
<script>
import selectContainer from './select-container.vue';
export default {
components: { selectContainer },
props: {
records: {
default: function(){return{}},
type: Object
}
},
data: function() {
return {
selects: [{}, {}]
}
},
computed: {
},
methods: {
}
}
</script>
<style scoped>
</style>
select-container
<template>
<div>
<my-select
v-model.sync="select"
/>
</div>
</template>
<script>
import mySelect from './my-select.vue';
export default {
components: { mySelect },
props: {
index: { type: Number },
select: {
type: Object,
default: function(){return{}}
}
},
data : function(){
return {
}
},
methods: {
},
computed: {
}
}
</script>
<style scoped>
</style>
my-select
<template>
<select v-model="selected">
<option
v-for="(attr, index) in attributes"
:value="attr"
:selected="attr == selected"
>
{{attr}}
</option>
</select>
</template>
<script>
export default {
props: {
attributes: {
type: Array,
default: function() {
return []
}
}
},
data: function() {
return {
selected: ""
}
}
}
</script>
<style scoped>
</style>
There's still a lot of code in the post that I'm not following, but I think the gist of your question is how to reflect the selected property from the <my-select> component through to the <select-container> component. If that's the case, then the most straightforward approach is probably just to add a value and emit input events.
In the template, add an event handler for the native <select>
<select v-model="selected" @input="onInput">
Then, in the code, reflect that event up to the parent. Also be sure to accept a value property from that parent.
export default {
props: {
value: null,
},
data: function() {
return {
selected: this.value
}
},
methods: {
onInput() {
this.$emit("input", this.selected)
}
},
watch: {
value(newValue) {
this.selected = newValue;
}
}
}
And then the parent can simply use the conventional v-model binding.
<my-select v-model="select"/>
这篇关于Vue2:处理多子道具与模型的同步的文章就介绍到这了，希望我们推荐的答案对大家有所帮助，也希望大家多多支持IT屋！
