Question

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

示例

Index.vue 页面：

import modal from './modal';

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

我想将我在索引页面中拥有的名称对象发送到已导入到index.vue中的模态中，如您所见，< / p>

Answer 1

在大多数情况下，建议您通过道具将数据从父母传递给孩子。

示例：

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

<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的更多信息。

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

1 个答案: