Vue js передача данных между компонентами

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

App.vue обычный:

<template>
  <div id="app">
    <div class="flexing">
      <questionPanel />
      <router-view />
    </div>
  </div>
</template>

<script>
import firstQuestion from './components/firstQuestion'
import questionPanel from './components/questionPanel'

export default {
  name: 'App',
  components: {
    first,
    questionPanel,
  },
}
</script>

Есть первый компонент first.vue:

<template>
   <h1>{{ title }}</h1>
</template>

<script>
    export default {
      name: 'first',
      components: {},
      props: {},
      data() {
        return {
          title: 'Текст первого вопроса',
        }
      },
    }
</script>

Есть второй questions.vue:

    <template>
            
    </template>
       
import first from './first.vue'

    <script> 
        export default {
            name: 'questions',
            components: {
              first
            },
            props: ['title'],
            data() {
                return {
                    questions: 'questions'
                }
            }
    }
    </script>

Как мне отобразить title в questions ?

Большое спасибо!


Ответы (0 шт):