如何使用 Vuejs 将命名插槽从父项替换为子项再到孙子项

Question

我面临着渲染第三方日期选择器并从第三方组件获取值的情况。 由于它是第三方，我无法在其上定义道具。但是，第三方组件提供了在 v 模型中传递变量的能力。

因此，我的组件设计要求我能够将命名槽从父项传递到子项再到孙子项。

例如;

//============ enter-or-upload-task.js =============
Vue.config.productionTip = false;
const sourceoftruth = {orderdate:''};
Vue.component('upload-by-csv',{
template:
`<div><input type="file" /></div>
`
});
//here i want to use the date picker
Vue.component('enter-task-by-form',{
data:function(){
return {
sourceoftruth
};
},
methods:{
getOrderDate: function(){
console.log(sourceoftruth.orderdate);
}
},
template:
`<div>
<label>Order Date:</label>
<!--Hoping to get datepicker component displayed here -->
<slot name="picker"></slot>
<input type="submit" @click.prevent = "getOrderDate()" />
</div>
`
});
const EnterTaskOrUploadByCSV = {
template:
`<div>
<upload-by-csv></upload-by-csv>
<enter-task-by-form>
<!-- wish to pass this named slot to this component -->
<slot name="picker"></slot>
</enter-task-by-form>
</div>
`
}
new Vue({
el:"#app",
data:{
sourceoftruth
},
components:{
'datepicker':vuejsDatepicker,
'enter-form-or-csv':EnterTaskOrUploadByCSV
}
})
// ===========================================================

该索引.html 为

<script src="./js/lib/vue.js></script>
<script src="./js/lib/vuejs-datepicker.js"></script>
<div id="app">
<enter-form-or-csv>
<datepicker v-model="sourceoftruth.orderdate" slot="picker"> 
</datepicker>
</enter-form-or-csv>
</div>
<script src = "./js/components/enter-or-upload-task.js"></script>

我尝试将命名插槽传递到适当的位置，但无法使其工作。请我需要有关如何解决此问题的帮助。

Answer 1

很高兴它现在可以工作了。我所做的更改使其有效

在EnterTaskOrUploadByCSV中，我添加了一个模板插槽来保存将从父级接收的日期选择器组件。 然后，孙子组件将需要名为 Slot 的模板。

const EnterTaskOrUploadByCSV = {
template:
`<div>
<upload-by-csv></upload-by-csv>
<enter-task-by-form>
<template slot="passpicker">
<slot name="picker"></slot>
</template>
</enter-task-by-form>
</div>
`
}

需要名为 slot 的模板的孙子组件。

Vue.component('enter-task-by-form',{
data:function(){
return {
sourceoftruth
};
},
methods:{
getOrderDate: function(){
console.log(sourceoftruth.orderdate);
}
},
template:
`<div>
<label>Order Date:</label>
<!-- Datepicker will show now -->
<slot name="passpicker"></slot>
<input type="submit" @click.prevent = "getOrderDate()" />
</div>
`
});