使用 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>

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>

儿童.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.我该怎么做？ 我将div消耗 parentMsg 的 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 并作为 props 传递给子项：

<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

为什么不将子组件放在父模板中并将消息从父模板传递给它们？插槽不适合这样使用。

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>