Перебор списка строк в дочернем компоненте Vue

Question

Исходя из среды разработки React, я бросаю себе вызов изучить немного Vue в данный момент.Тем не менее, я застрял с некоторыми проблемами при передаче данных как компонентов между компонентами.

Моя цель - отображать строки из списка в виде

элементов, которые позже я буду анимировать с помощью переходов.Для этого я создал проект Vue с использованием Vue Cli, а дополнительные библиотеки включают только Bootstrap и Router.

Я просто не могу заставить это работать ...

Так что у меня есть main.js , содержащий мои пути и:

new Vue({
  router,
  data: {
    listOfStrings: ['test1 test1', 'test2', 'test3']
  },
  render: h => h(App),

}).$mount('#app')

У меня также есть Home.vue , содержащий область с большим изображением, куда я хочу поместить предложенияиз списка.

<template>
    <div class="homelander">
        <div class="container">
            <TextHome/>
        </div>
    </div>
</template>
<script>
import TextHome from '../components/TextHome.vue'
export default {
    name: 'Home',
    components: {
    TextHome
    }
</script>
}

И, наконец, у меня есть компонент TextHome, который я на самом деле хотел бы повторно использовать, передавая список, содержащий строки, в качестве реквизита.

TextHome.vue

<div v-for="item in listOfStrings" v-bind:key="item">
   <p>{{item}}</p>
</div>

Неважно, что я пытаюсь, список не определен, или я получаю "Свойство или метод" listOfStrings "не определен в экземпляре, но на него ссылаются во времяrender. ", или даже ошибка из-за отсутствия ключей для каждого символа в строке ... Так что, да ... Я очень запутался ... Если кто-нибудь может пролить свет на этот беспорядок, я был бы признателен.

Answer 1

Родительский vm недоступен детям в Vue.Вы должны передать это.По сути, вы можете выбрать один из двух шаблонов:

• передать их реквизиты дочерним экземплярам <child-component :some-prop="parentMethod"> - вы также должны определить someProp как компонент проп в child-component)
• используйте Vuex, (сохраните все свои данные в хранилище и импортируйте именно то, что вам нужно, именно там, где вам нужно, используя mapGetters).

В вашем случае это имеет смыслиспользовать первый вариант, но если вам придется передавать данные 3 или 4 уровня, а также передавать действия от детей к родителям аналогичным образом, вам, вероятно, следует подумать об использовании Vuex.

Кроме того,data не может быть объектом в Vue.Vue устанавливает реактивные установщики / получатели на data во время выполнения и, если ваш data является объектом, он выдаст ошибку.Вы либо вообще не определяете его, либо определяете как функцию, возвращающую объект.

Все ключи, определенные в data, будут реактивными (= отслеживаются изменения).Любое изменение их значений приведет к обновлению / повторному отображению компонента.Допустимые примеры данных:

data() {
  return {/* your data here */ }
}

data: () => ({ /* your data here */ })

И последнее, но не менее важное, если для этого нет веской причины (т. Е. Его необходимо предоставить другим компонентам) для listOfStrings, чтобы жить в родителе, донне определить это там.Вы должны установить их как данные именно там, где они вам нужны, которые находятся в дочернем компоненте:

Vue.config.productionTip = false;
Vue.config.devtools = false;

Vue.component('text-home', { 
  template: `<div>
    <p v-for="(item, key) in listOfStrings" :key="key" v-text="item" />
  </div>`,
  data: () => ({
    listOfStrings: ['string 1', 'string 2', 'string 3']
  })
});

new Vue({
  el: '#app'
})

<script src="https://cdnjs.cloudflare.com/ajax/libs/vue/2.5.17/vue.js"></script>
<div id="app">
  <div class="homelander">
        <div class="container">
            <text-home />
        </div>
    </div>
</div>

Answer 2

Вы должны иметь данные в родительском компоненте как функцию и отправлять эти данные в дочерний компонент как реквизиты, ниже приведен фрагмент кода:

<template>
    <div class="homelander">
        <div class="container">
            <TextHome :listOfStrings="listOfStrings"/>
        </div>
    </div>
</template>
<script>
import TextHome from '../components/TextHome.vue'
export default {
    name: 'Home',
    components: {
    TextHome
    },
    data : function {
     return {
        listOfStrings: ['test1 test1', 'test2', 'test3']
      }
    }
</script>
}

, а затем в дочернем компоненте вы должны получить доступ к этим данным через назначенные реквизитыкак показано ниже:

<template>
    <div v-for="item in listOfStrings" v-bind:key="item">
      <p>{{item}}</p>
    </div>
</template>
<script>
export default {
    name: 'TextHome',
    props: ["listOfStrings"]
</script>
}

Answer 3

new Vue является просто экземпляром Vue Object, а TextHome.vue является компонентом экземпляра Vue, он не может использовать данные из других компонентов (из-за ограничений vue？).

вы можете использовать проп для передачи данных

или для доступа к корневому экземпляру

или Внедрение зависимости

или использование Vue.prototype для определения глобального свойства в main.js.

или vuex

Answer 4

Может быть, вам не хватает закрывающей скобки в блоке экспорта?