2

Подскажите как передать значение выше, в дочернем компоненте вызываю this.$emit('get-method', this.users)

а в родительском получить каким то образом <add-new-base-component @get-method="newMethod" ref="showmodal"></add-new-base-component>

Мне нужно в newMethod получить this.users

1 ответ 1

4

Согласно документации - Передача данных вместе с событием: Вы можете отправить определённые данные вместе с событием. Например, если нужно, чтобы дочерний компонент отправлял данные родительскому компоненту, мы можем использовать второй параметр $emit для предоставления этого значения:

this.$emit('get-method', this.users)

, если обработчик события будет методом (допустим):

... @get-method="newMethod" ...

, тогда значение будет передано первым аргументом:

newMethod(users) {
 this.users = users
},

Привожу полный пример:

Vue.component('child',{
  data(){
    return {
      users: ['Viktor','Ruslan', 'Alex']
    }
  },
  methods: {
    getUsers() {
      this.$emit('get-method', this.users)
    }
  },
  template: `
  <fieldset>
   <legend>Дочерний компонент</legend>
    users = {{ users }}
    <button @click="getUsers">Отправить users родителю</button>
  </fieldset>
  `
})
Vue.component('parent',{
  data(){
    return {
      users: []
    }
  },
  methods: {
    newMethod(users) {
      this.users = users
    },
  },
  template: `
  <fieldset>
   <legend>Родительский компонент</legend>
    users = {{ users }}
    <child @get-method="newMethod" ref="showmodal"></child>
  </fieldset>
  `
})


new Vue({
  el: '#app'
})
<script src="https://cdnjs.cloudflare.com/ajax/libs/vue/2.5.17/vue.min.js"></script>
<div id="app">
  <parent></parent>
</div>

Ваш ответ

Нажимая на кнопку «Отправить ответ», вы соглашаетесь с нашими условиями использования и подтверждаете, что прочитали и поняли наши политику конфиденциальности и нормы поведения.

Всё ещё ищете ответ? Посмотрите другие вопросы с метками или задайте свой вопрос.