Question

我正在尝试构建一个VueJS组件。我有两个其他组件，我想以父子方式使用。现在，我想将父母的数据传递给孩子。就像这样：

App.vue

<template>
    <div id="app">
        <parent>
            <child></child>
            <child></child>
            <child></child>
            <child></child> 
        </parent>
    </div>
</template>

<script>
    import child from './child.vue'
    import parent from './parent.vue'

    var vm = new Vue({
      el: '#app',
      components: {
        parent,
        child
      }
    })  
</script>

parent.vue

<template>
    <div class="container">
        This is parent component
        <slot>
        </slot>
    </div>
</template>

<script>
    export default {
        name: 'parent',
        data () {
            return {
                parentMsg: {
                    'key1': 'value1',
                    'key2': 'value2'
                }
            }
        }
    }
</script>

child.vue

<template>
    <div class="container">
      Child component
      <!-- I have to place a div here which will consume parentMsg object -->
      <!-- Each instance of child component rendered should have access to parentMsg -->
      <div>
         <!-- Some HTML to consume the parentMsg -->  
      </div>
    </div>
</template>

<script type="text/javascript">
    export default {
        name: 'child',
        data () {
            return {
                demo: 'Demo message changed'
            }
        }
    }
</script>

我希望parentMsg中的parent.vue child.vue可以访问parentMsg。我不想在App.vue上公开div。我怎样才能做到这一点？我将sequelize.authenticate().then(() => { console.log("Success!"); var News = sequelize.define('likes', { title: { type: Sequelize.STRING }, content: { type: Sequelize.STRING } }, { freezeTableName: true }); News.create({ title: 'Getting Started with PostgreSQL and Sequelize', content: 'Hello there' }); News.findAll({}).then((data) => { console.log(data); }).catch((err) => { console.log(err); }); }).catch((err) => { console.log(err); });消耗的parentMsg放在parent.vue模板中的（并且之后）未命名的插槽中，并认为对于child.vue的每个实例，将呈现div的副本。它不起作用。

Answer 1

您可以在parent.vue

中的插槽中传递数据

<template>
    <div class="container">
        This is parent component
        <slot :parentMsg="parentMsg"></slot>
    </div>
</template>

在app.vue中通过范围访问parentMsg并将其作为道具传递给child：

<template>
    <div id="app">
        <parent>
           <template scope="defaultSlotScope">
            <child :msg="defaultSlotScope.parentMsg"></child>
            <child :msg="defaultSlotScope.parentMsg"></child>
            <child :msg="defaultSlotScope.parentMsg"></child>
            <child :msg="defaultSlotScope.parentMsg"></child>
          </template>
        </parent>
    </div>
</template

＆GT;

在child.vue中使用msg作为道具：

<template>
    <div class="container">
      <div>
         {{msg}}  
      </div>
    </div>
</template>

<script type="text/javascript">
    export default {
        name: 'child',
        props:['msg'],
        data () {
            return {
                demo: 'Demo message changed'
            }
        }
    }
</script>

Answer 2

为什么不将子组件放在父模板中并将msg从父组件传递给它们？插槽不打算像这样使用。

App.vue

<template>
    <div id="app">
        <parent>
        </parent>
    </div>
</template>

<script>
    import parent from './parent.vue'

    var vm = new Vue({
      el: '#app',
      components: {
        parent,
        child
      }
    })  
</script>

Parent.vue

<template>
    <div class="container">
        This is parent component
        <child :msg="key1"></child>
        <child :msg="key1"></child>
    </div>
</template>

<script>
    import child from './child.vue'

    export default {
        name: 'parent',
        data () {
            return {
                parentMsg: {
                    'key1': 'value1',
                    'key2': 'value2'
                }
            }
        }
    }
</script>

Child.vue

<template>
    <div class="container">
      Child component
      <div>
         {{msg}}
      </div>
    </div>
</template>

<script type="text/javascript">
    export default {
        name: 'child',
        props: {
          msg: String
        },
        data () {
            return {
                demo: 'Demo message changed'
            }
        }
    }
</script>

使用VueJS中的插槽访问其他组件中的组件数据

2 个答案: