Как передать данные из дочернего компонента в родительский на Vue.js?

@nikko Используйте this.$emit() и имя ивента и вторым параметром данные, которые Вы хотите передать из дочернего компонента в родительский компонент, посмотрите ниже пример кода на Vue.js:

Родительтский компонтент:

 1
 2
 3
 4
 5
 6
 7
 8
 9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24

<template>
  <div class="container">
    <h1>Родительский компонент</h1>
    <p>Привет {{ name }}</p>
    <child @change-name="updateName" />
  </div>
</template>

<script>
import Child from '@/components/Child'

export default {
  name: 'Parent',
  components: { Child },
  data: () => ({
    name: 'Мир',
  }),
  methods: {
    updateName(name) {
      this.name = name
    },
  },
}
</script>

Дочерний компонент:

 1
 2
 3
 4
 5
 6
 7
 8
 9
10
11
12
13
14
15
16
17
18
19
20

<template>
  <div class="wrapper">
    <input v-model="childName" type="text" @input="changeName" />
  </div>
</template>

<script>
export default {
  name: 'Child',
  data: () => ({
    childName: '',
  }),
  methods: {
    changeName() {
      // Вызвать евент и родительский метод и передать значение childName
      this.$emit('change-name', this.childName)
    },
  },
}
</script>

@nikko 

Существует несколько способов передать данные из дочернего компонента в родительский во Vue.js:

1. События - добавьте событие в дочернем компоненте и эмитируйте его с помощью $emit() с передачей нужных данных. Затем в родительском компоненте добавьте обработчик события и получите переданные данные.
2. Проксирование свойств - в родительском компоненте определите свойство, которое будет передано в дочерний компонент, а затем в шаблоне родительского компонента передавайте это свойство в дочерний компонент через v-bind.
3. Рефы - создайте реф на дочерний компонент в родительском, а затем вызовите нужный метод или получите свойство напрямую через реф.
4. Vuex - создайте хранилище данных в состоянии приложения Vuex и импортируйте его в дочерний компонент для чтения и записи данных.