-1👍
You have 2 solutions: Passing it from parent to grandchild as props through the child component.
parent:data: yourAction => child:props:yourAction => grandchild:props:yourAction
and then use v-html to render it in case it has some html tags
or pass it as props to the child and use slot there to pass it to the grandchild.
First solution
blank_page.vue
<template>
<div>
<search-product :multiple="false" :shop="shop" v-model="items" display="table" :modal="false" :yourAction:"yourAction">
</search-product>
</div>
</template>
<script>
export default {
props: {
shop: {}
},
data() {
return {
items: [],
yourAction: "Here some stuff"
};
}
}
</script>
search.vue
<template>
<div>
<template>
<component v-bind:is="getDisplay()" :multiple="multiple" :items="items" v-model="selectedItems" :yourAction="yourAction"></component>
</template>
</div>
</template>
<script>
import SearchButton from './search-button.vue';
import SearchInput from './input.vue';
import DisplayTable from './displays/table.vue';
import DisplaySmallGrid from './displays/small-grid.vue';
import DisplayMediumGrid from './displays/medium-grid.vue';
import DisplayLargeGrid from './displays/large-grid.vue';
export default {
components: {
searchButton: SearchButton,
searchInput: SearchInput,
displayTable: DisplayTable,
displaySmallGrid: DisplaySmallGrid,
displayMediumGrid: DisplayMediumGrid,
displayLargeGrid: DisplayLargeGrid,
},
props: {
yourAction:{
default:""
},
modal: {
default: false
},
multiple: {
default: true
},
value: {},
shop: {},
display: {
default: 'table'
}
},
watch: {
selectedItems(data) {
this.$emit('input', data);
}
},
data() {
return {
q: '',
items: [],
selectedItems: [],
modalOpen: false,
templates: {
DisplayTable
}
};
},
methods: {
getDisplay() {
return 'display' + this.display.charAt(0).toUpperCase() + this.display.slice(1);
},
toggleModal() {
this.modalOpen = !this.modalOpen;
}
}
}
</script>
table_view.vue
<template>
<div :class="panel ? 'card' : ''">
<div :class="panel ? 'card-body' : ''">
<table class="table table-striped table-hover">
<thead>
<tr>
<th>ID</th>
<th>Actions</th>
</tr>
</thead>
<tbody>
<tr v-for="item in items">
<td v-text="item.id"></td>
<td v-html="yourAction">
</td>
</tr>
</tbody>
</table>
</div>
</div>
</template>
<script>
export default {
props: {
yourAction,
items: {},
value: {},
multiple: {},
panel: {
default: true
}
},
}
</script>
Second solution
blank_page.vue: same as the first example I gave you, you pass your action as props
search.vue: you pass the props to the slot as you did in the example of blank_page.vue
table_view.vue : remain the same
Source:stackexchange.com