Vuejs2 如何用Vuejs替换从父代到子代再到孙代的命名插槽

我面临着这样一种情况：呈现第三方日期选择器，并从第三方组件获取值。因为它是第三方，我无法定义它的道具。然而，第三方组件提供了在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
   }
 })
 // ===========================================================

//===================enter-or-upload-task.js=============
Vue.config.productionTip=false；
const sourceoftruth={orderdate:''}；
Vue.component（'upload-by-csv'{
模板：
`
`
});
//这里我想使用日期选择器
Vue.component（'enter-task-by-form'{
数据：函数（）{
返回{
真理之源
};
},
方法：{
getOrderDate:函数（）{
console.log（sourceoftruth.orderdate）；
}
},
模板：
`
订购日期：
`
});
常量ENTERTASK或UPLOADBYCSV={
模板：
`
`
}
新Vue({
el:“应用程序”，
数据：{
真理之源
},
组成部分：{
“日期选择器”：vuejsDatepicker，
“输入表单或csv”：EnterTaskOrUploadByCSV
}
})
// ===========================================================

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

---

很高兴它现在可以工作了。我所做的改变使它起作用

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

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>
`
});

const entertask或uploadbycsv={
模板：
`
`
}

孙子组件需要名为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>
`
}

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>
`
});

Vue.component（'enter-task-by-form'{
数据：函数（）{
返回{
真理之源
};
},
方法：{
getOrderDate:函数（）{
console.log（sourceoftruth.orderdate）；
}
},
模板：
`
订购日期：
`
});
首先，我建议您使用vue开发工具并查看您在此处创建的组件。第二最后，对于
sourceOfTruth
，您根本没有定义默认值或值，更不用说具有属性
orderdate