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

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>

父.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>

我希望parent.vue 中的parentMsg 可以在child.vue 中访问。我不想在App.vue 上暴露parentMsg。我怎样才能做到这一点？ 我将使用 parentMsg 的div 放置在 parent.vue 模板中的未命名插槽内（以及之后），并认为对于 child.vue 的每个实例，都会呈现 div 的副本。它不起作用。

Answer 1

你可以在 parent.vue 的 slot 中传递数据

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

在 app.vue 中通过作用域访问 parentMsg 并作为 props 传递给 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

>

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

父.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>