Я пытаюсь реплицировать связь родитель-потомок в компонентах. Идея состоит в том, чтобы иметь компонент с двумя вариантами выбора, основанный на переключателях, повторно используемый несколько раз:
Vue.component('chooser', {
template: '<form> <input type="radio" value="hello" v-model="picked"> Hello<br><input type="radio" value="world" v-model="picked"> World<br></form>',
data: function() {
return {
picked: null
}
},
watch: {
picked: function() {
this.$emit('picked')
}
}
})
var vm = new Vue({
el: "#root",
data: {
first: null,
second: null
}
})
<script src="https://cdnjs.cloudflare.com/ajax/libs/vue/2.3.3/vue.js"></script>
<div id="root">
<chooser v-model="first"></chooser>
Here I want to get choice one: {{first}}
<chooser v-model="second"></chooser>
Here I want to get choice two: {{second}}
</div>
Я не получаю информацию от компонента обратно родителям, почему?
Вы неправильно используете функцию $emit
. Чтобы эмулировать v-модель, вы должны испустить событие типа "вход" (первый аргумент) и соответствующее значение (второй аргумент).
Vue.component('chooser', {
template: '<form> <input type="radio" value="hello" v-model="picked"> Hello<br><input type="radio" value="world" v-model="picked"> World<br></form>',
data: function() {
return {
picked: null
}
},
watch: {
picked: function() {
this.$emit('input', this.picked);
}
}
})
var vm = new Vue({
el: "#root",
data: {
first: null,
second: null
}
})
<script src="https://cdnjs.cloudflare.com/ajax/libs/vue/2.3.3/vue.js"></script>
<div id="root">
<chooser v-model="first"></chooser>
Here I want to get choice one: {{first}}
<chooser v-model="second"></chooser>
Here I want to get choice two: {{second}}
</div>