Se consegui compreender corretamente, você tem um valor dentro do componente e quer passar a exibi-lo no input do componente pai, correto?
Se sim, há duas formas de fazer isso. A primeira seria usando $emit
, para passar um valor do componente filho para o pai, capturando com um método. $emit
vai te servir, no geral, para eventos como um carrinho de compras atualizado, quando clicar em um botão etc.
<!-- component <Info> -->
<script>
export default {
data() {
return { 'meuValorDoComponenteFilho': 'Valor' }
},
created() {
// aqui eu emiti o evento no created() do componente, mas você pode usar em qualquer outro evento
this.$emit('capturarValor', this.meuValorDoComponenteFilho }
}
}
</script>
<!-- componente pai -->
<script>
...
data() {
return { 'valorDoInfo': null }
},
methods: {
metodoCapturarValor(valor) {
this.valorDoInfo = valor;
}
}
</script>
<h1>{{ valorDoInfo }}</h1>
<Info @capturarValor="metodoCapturarValor">
A outra forma seria você fazer o seu componente suportar o two-way binding (v-model).
<!-- componente Info -->
<template>
<input name="meuCampoComponenteFilho" @input="eventoValorCampoAlterado" />
</template>
<script>
export default {
prop: ['value'], // nome obrigatório
data () {
return {
modelDoCampoDoComponente: this.value
}
},
methods: {
eventoValorCampoAlterado (e) {
this.modelDoCampoDoComponente = e.target.value;
this.$emit('input', this.modelDoCampoDoComponente)
}
}
}
</script>
<!-- componente pai -->
<script>
...
data() { return { modelDoComponenteFilho : 'valor padrao' } }
...
</script>
<Info v-model="modelDoComponenteFilho">
<h1>{{ modelDoComponenteFilho }}</h1>