问题
I'm currently using this UI component from http://www.vue-tags-input.com
I'm planning to create a reusable component for vue-tags-input, here's my current code:
components/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>
and in my parent vue page. I'm calling above component with this code:
pages/users/new.vue
<BaseInputTag v-model="tag" :tags="interests" label="Interests"/>
<script>
export default {
name: 'InsiderForm',
data() {
return {
tag: '',
interests: []
};
}
}
</script>
How can I emit back the child component's newTags
to parent's data interests
回答1:
You're almost there!
Parent component:
<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>
回答2:
I managed to make it work, here's my code:
child-component
<template>
<b-form-group :label="label">
<no-ssr>
<vue-tags-input
:value="value"
v-model="tag"
placeholder="Add Tag"
:tags="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, String] },
validations: { type: Object, required: true }
},
data() {
return {
tag: ''
}
},
methods: {
updateValue(newTags) {
this.$emit('updateTags', newTags);
}
}
}
</script>
and to receive the changes to parent component:
<BaseInputTag :tags="interests" @updateTags="interests = $event" label="Interests"/>
<script>
export default {
name: 'InsiderForm',
data() {
return {
tag: '',
interests: []
};
}
}
</script>
来源:https://stackoverflow.com/questions/54369236/reusable-component-for-vue-tags-input