迭代Vue子组件中的字符串列表答案

【问题标题】：Iterating list of strings in Vue child component迭代Vue子组件中的字符串列表
【发布时间】：2020-01-22 04:27:20
【问题描述】：

来自 React 开发环境，目前我正在挑战自己学习一些 Vue。但是，在组件之间传递数据作为道具时，我遇到了一些问题。

我的目标是将列表中的字符串显示为

元素，稍后我将使用过渡动画。为此，我使用 Vue Cli 创建了一个 Vue 项目，其他库仅包括 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”未在实例上定义但在渲染期间引用。”，甚至由于缺少键而导致错误字符串中的每个字符...所以，是的..我很困惑...如果有人能解释一下这个烂摊子，我将不胜感激。

【问题讨论】：

标签： vue.js vuejs2 frontend vue-component

【解决方案1】：

父虚拟机在 Vue 中对子虚拟机不可用。你必须把它传下去。基本上，您可以在两种模式之间进行选择：

将它们传递给子实例<child-component :some-prop="parentMethod"> - 您还必须在child-component 中将someProp 定义为component prop）
使用 Vuex，（使用 mapGetters 将所有数据保存到存储中并准确导入所需的数据）。

在您的情况下，使用第一个选项是有意义的，但是如果您发现自己必须将数据向下传递 3 或 4 个级别，并且还必须以类似的方式将操作从孩子传递给父母，您可能应该考虑使用Vuex。

另外，Vue 中的data cannot be an object。 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>

【讨论】：

非常感谢您的详细解释。我想我开始有这种感觉了。 :)

【解决方案2】：

您应该将父组件中的数据作为函数并将该数据作为道具发送到子组件，下面是代码sn-p：

<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>
}

【讨论】：

【解决方案3】：

可能是您在导出块中缺少右括号吗？

【讨论】：

不..这只是一个复制粘贴问题

【解决方案4】：

new Vue 只是 Vue Object 的一个实例，TextHome.vue 是 Vue 实例的一个组件，它不能使用来自其他组件的数据（因为 vue 的限制？）。

你可以使用prop来传递数据

或accessing the Root Instance

或Dependency Injection

或者使用 Vue.prototype 在 main.js 中定义一个全局属性。

或者vuex

【讨论】：