Javascript 将支柱从VueJS上v-for的元素传递到动态插槽组件
我正在尝试为VueJS的slot元素制作一些可重用的模板,但效果不好 我面临的问题是这样的。我制作了3个Vue文件来构建一些模板Javascript 将支柱从VueJS上v-for的元素传递到动态插槽组件,javascript,vue.js,vuejs2,vue-component,slot,Javascript,Vue.js,Vuejs2,Vue Component,Slot,我正在尝试为VueJS的slot元素制作一些可重用的模板,但效果不好 我面临的问题是这样的。我制作了3个Vue文件来构建一些模板 Guide.vue它将是for循环的单位 ListView.vue导入ListTemplate.vue和Guide.vue ListTemplate具有v-for循环,用于ListView.vue中的行道具,以及 用于Guide.vue的插槽 我想通过插槽将从v-for循环产生的行道具传递到Guide.vue,但它似乎是未定义的。所以我尝试在ListView.vue上
Guide.vue
它将是for循环的单位李>
ListView.vue
导入ListTemplate.vue
和Guide.vueListTemplate
具有v-for
循环,用于ListView.vue
中的行道具,以及
用于Guide.vue的插槽v-for
循环产生的行道具传递到Guide.vue
,但它似乎是未定义的
。所以我尝试在ListView.vue
上的模板包装组件元素上声明插槽范围,但它不起作用
// Guide.vue
<template>
<tr onclick="location.href='info_view.html'">
<td>
<p class="alarm_h1">{{ slotProps.row.title }}</p>
<p class="alarm_h2">{{ slotProps.row.title }}</p>
<p class="alarm_h2">{{ slotProps.row.title }}</p>
</td>
</tr>
</template>
<script>
export default {
name: "guide",
props: ['slotProps', 'row']
}
</script>
// List.vue
<template>
<div>
<Guide-head/>
<List-template :rows="guides">
<template>
<component :is="tr_component"></component>
</template>
</List-template>
</div>
</template>
<script>
import Guide from '../../../components/template/list/tr/Guide'
import GuideHead from '../../../components/template/head/GuideHead'
import ListTemplate from '../../../components/template/list/ListTemplate'
export default {
name: "list",
components: {
Guide,
GuideHead,
ListTemplate
},
data() {
return {
guides: [
{id: 1, date: '2018.08.20 15:00', title: 'title 1', emergency: false},
{id: 2, date: '2018.08.20 15:00', title: 'title 2', emergency: false},
{id: 3, date: '2018.08.20 15:00', title: 'title 3', emergency: false}
],
tr_component: 'guide'
}
}
}
</script>
// ListTemplate.vue
<template>
<div>
<table class="reser_check_table" cellpadding="0" cellspacing="0">
<div v-for="(row, idx) in rows" @click.native="clickNotice(idx)" :key="row.id">
<slot v-bind:row="row">{{row.title}}</slot>
</div>
</table>
</div>
</template>
<script>
export default {
name: "list",
props: ['rows'],
/*components: {
rowTemplate: Row
},*/
methods: {
clickNotice(idx) {
console.log('clicked');
//this.$emit('viewNotice', idx); @viewNotice="view"
},
view() {
}
}
}
</script>
//Guide.vue
{{slotProps.row.title}
{{slotProps.row.title}
{{slotProps.row.title}
导出默认值{
名称:“指南”,
道具:['slotProps','row']
}
//List.vue
从“../../../components/template/list/tr/Guide”导入指南
从“../../../components/template/head/GuideHead”导入导向头
从“../../../components/template/list/ListTemplate”导入ListTemplate
导出默认值{
名称:“名单”,
组成部分:{
指导
导向器,
列表模板
},
数据(){
返回{
指南:[
{id:1,日期:'2018.08.20 15:00',标题:'title 1',紧急情况:false},
{id:2,日期:'2018.08.20 15:00',标题:'title 2',紧急情况:false},
{id:3,日期:'2018.08.20 15:00',标题:'title 3',紧急情况:false}
],
tr_组件:“指南”
}
}
}
//ListTemplate.vue
{{row.title}}
导出默认值{
名称:“名单”,
道具:[“行”],
/*组成部分:{
行模板:行
},*/
方法:{
点击通知(idx){
console.log('clicked');
//这是。$emit('viewNotice',idx);@viewNotice=“view”
},
视图(){
}
}
}