我目前正在使用 http://www.vue-tags-input.com 中的这个 UI 组件
我计划为 vue-tags-input 创建一个可重用的组件,这是我当前的代码:
组件/UI/BaseInputTag.vue
<template>
<b-form-group :label="label">
<no-ssr>
<vue-tags-input
:value="tags"
@tags-changed="updateValue"/>
</no-ssr>
</b-form-group>
</template>
<script>
export default {
name: 'BaseInputTag',
props: {
label: { type: String, required: true },
value: { type: [String, Number, Array] },
tags: { type: [Array] }
},
methods: {
updateValue(newTags) {
this.$emit('input', newTags);
}
}
}
</script>
以及我的父 vue 页面。我使用以下代码调用上面的组件:
pages/users/new.vue
<BaseInputTag v-model="tag" :tags="interests" label="Interests"/>
<script>
export default {
name: 'InsiderForm',
data() {
return {
tag: '',
interests: []
};
}
}
</script>
如何将子组件的 newTags
发送回父组件的数据 interests
最佳答案
你就快到了!
父组件:
<BaseInputTag v-model="tag" :tags="interests" @input="doStuffWithChildValue" label="Interests"/>
<script>
export default {
name: 'InsiderForm',
data() {
return {
tag: '',
interests: []
};
},
methods: {
doStuffWithChildValue (value) {
console.log('Got value from child', value)
}
}
}
</script>
关于javascript - vue-tags-input 的可重用组件,我们在Stack Overflow上找到一个类似的问题: https://stackoverflow.com/questions/54369236/