Как передать от компонента к родителю выбор переключателя?

Question

Как передать от компонента к родителю выбор переключателя?

1

Я пытаюсь реплицировать связь родитель-потомок в компонентах. Идея состоит в том, чтобы иметь компонент с двумя вариантами выбора, основанный на переключателях, повторно используемый несколько раз:

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>

Я не получаю информацию от компонента обратно родителям, почему?

WoJ 01 июнь 2017, в 10:05

Источник

Теги:

javascript

vue.js

vue-component

1 ответ

Ещё вопросы

Cobaltway · Accepted Answer · 2017-06-01T06-42-00.000Z

Вы неправильно используете функцию $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>

Спасибо. Я пропустил это в единственном месте, где это упомянуто в документах, которые я связал (в примере, фактически)