在 vue.js 中将数据从父级传递给子级答案

【问题标题】：Pass data from parent to child in vue.js在 vue.js 中将数据从父级传递给子级
【发布时间】：2023-03-13 21:50:02
【问题描述】：

我开始使用 Vue.js 和 Laravel 做一个小项目，我想知道如何从 父组件传递数据 strong> 给孩子：这是我所拥有的一个例子

Index.vue 页面：

import modal from './modal';

export default {
    components: { modal},
    data: function () {
         names: {'John','Doe'}
    }
}

我想将我在 index 页面中的 names object 发送到我在 index.vue 中导入的模态，如您所见

【问题讨论】：

stackoverflow.com/questions/49505160/…
我不清楚 :( 有点复杂
与您的问题没有直接关系，但您的data 函数中缺少return 语句：data: function(){ return { names: ['John', 'Doe'] } }（请注意，我将名称更改为数组）。至于将 names 传递给modal 组件，你能分享你的modal.vue 来展示道具吗？

标签： vue.js

【解决方案1】：

在大多数情况下，建议您使用 prop 从父级向子级传递数据。

示例：

父组件将名称作为道具传递给子组件：

<template>
 <div>
   <child-component 
    :childNames="names"
   />
 </div>
</template

<script>
 import childComponent from '@/components/childComponent'
 components: {
    childComponent
 }
 export default {
  data: function () {
     names: {'John','Doe'}
  }
 }
</script>

子组件注册道具，现在您可以访问childNames，这将是来自您父母的数据（names）：

<script>
 export default {
  props: {
    childNames: {
        type: Object,
        required: true
    }
  }
 }
</script>

供您参考 - 有关props的更多信息。

【讨论】：