¿Cómo enlazar componentes con vue js?
Tengo forma y componentes selectos. De hecho, las cosas son simples: necesito dos modelos vinculantes.
El componente padre:
Vue.component('some-form', {
template: '#some-form',
data: function() {
return {
countryNameParent: ''
}
}
});
El componente hijo con elementos:
Vue.component('countries', {
template: '#countries',
data: function () {
return {
items: {
"0": {
"id": 3,
"name": "Afghanistan"
},
"1": {
"id": 4,
"name": "Afghanistan2"
},
"2": {
"id": 5,
"name": "Afghanistan3"
}
},
countryName: ''
}
},
props: ['countryNameParent'],
created: function() {
var that = this;
this.countryName = this.countryNameParent;
},
methods: {
onChange: function (e) {
this.countryNameParent = this.countryName;
}
}
});
Estoy usandov-model
para incorporar componentes arriba. Plantillas como esta:
<template id="some-form">
{{ countryNameParent }}
<countries v-model="countryNameParent"></countries>
</template>
<template id="countries">
<label for="">
<select name="name" @change="onChange" v-model="countryName" id="">
<option value="0">Select the country!</option>
<option v-for="item in items" v-bind:value="item.name">{{ item.name }}</option>
</select>
</label>
</template>
Mi objetivo es obtener datos en el componente principal para enviarlos al servidor (la forma real es mucho más grande), sin embargo, no puedo obtener el valor decountryName
encountryNameParent
. Además, Parent debe configurar los datos en sucesor si no está vacío.
Aqui tienesenlazar donde he estado intentando hacerlo de varias maneras (ver parte comentada). Sé que necesito usar$emit
para configurar los datos correctamente, incluso he implementado el modelo donde obtengo la imagen como base64 para enviarla a fuerza de la misma forma, ¡por lo tanto, creo que la solución se está acercando!
También:referencia donde he construido muestra con imagen.