我有2个组件，其中1个处理表WITH title_query
AS
(
SELECT title, COUNT(title) AS c FROM film
JOIN inventory
ON film.film_id = inventory.film_id
GROUP BY film.title
)
SELECT * FROM title_query WHERE C= 4
，其中1个处理引导模式<b-table>
Table.vue如下所示：
<b-modal>比起我想通过<template>
<b-container fluid>
<b-row>
<b-col md="24">
<b-table show-empty responsive hover
:items="items"
:fields="fields"
:current-page="currentPage"
:per-page="perPage"
:filter="filter"
fixed="fixed"
@row-clicked="clickRow"
class="text-center"
tdClass="align-middle">
<template slot="manage_column" slot-scope="row">
<p class="p-0 m-0"><a href="#">Edit</a><span class="d-inline-block p-2">|</span><a href="#">Renew</a></p>
<p class="p-0 m-0" v-show="hoverIndex === row.index"><span>...</span></p>
</template>
</b-table>
</b-col>
</b-row>
<b-row>
<b-col md="24" class="my-1">
<b-pagination :total-rows="totalRows" :per-page="perPage" v-model="currentPage" class="my-0" />
</b-col>
</b-row>
<SlideModal :show="this.show ? true : false" />
</b-container>
</template>
<script>
import SlideModal from '../lib/SlideModal.vue'
const items = [
{
manage_column: '',
name_column: 'John Doe',
address_column: '123 W. Oak Ln.'
},
{
manage_column: '',
name_column: 'Jane Doe',
address_column: '123 W. Oak Ln.'
},
{
manage_column: '',
name_column: 'Row Doe',
address_column: '123 W. Oak Ln.'
},
{
manage_column: '',
name_column: 'Joe Doe',
address_column: '123 W. Oak Ln.'
},
{
manage_column: '',
name_column: 'Jack Doe',
address_column: '123 W. Oak Ln.'
},
{
manage_column: '',
name_column: 'Jill Doe',
address_column: '123 W. Oak Ln.'
},
{
manage_column: '',
name_column: 'Jamie Doe',
address_column: '123 W. Oak Ln.'
}
]
export default {
name: 'TableViewListing',
components: {
SlideModal
},
data () {
return {
items: items,
fields: {
address_column: {
label: 'Address'
},
name_column: {
label: 'Name'
},
manage_column: {
label: 'Manage'
}
},
currentPage: 1,
perPage: 3,
totalRows: items.length,
pageOptions: [ 5, 10, 15 ],
filter: null,
hoverIndex: null,
showModal: false
}
},
methods: {
onFiltered (filteredItems) {
this.totalRows = filteredItems.length
this.currentPage = 1
},
clickRow (record, index, event) {
event.preventDefault()
let clickedEle = event.target
this.showModal = false
if (clickedEle.nodeName.toLowerCase() === 'a') {
/*********/
/* Action Link was clicked, trigger Action Link Modal here... */
/*********/
console.log('clicked an a tag most likely in actions column.')
alert('You clicked on the Action: ' + clickedEle.innerText)
} else if (clickedEle.nodeName.toLowerCase() !== 'button') {
/*********/
/* Row was clicked, trigger Row Modal here... */
/*********/
console.dir(this)
this.show = true
console.log('showModal = ' + this.showModal)
console.log('Clicked on a Row, not a button or an a tag.')
console.log(index)
console.dir(record)
alert('You clicked on the Global Row Element...')
}
}
}
}
</script>
<style>
</style>
方法挂接到表格行上的click事件来在SlideModal.vue中打开模态：
clickRow好的，我对我来说，这仍然是新事物，但是我觉得应该在这里单击该模式。但是，如何将点击事件发送到vue中的另一个组件？
之所以我希望它是不同的组件，是因为最终我想让这个<template>
<b-modal ref="myModalRef" title="Bootstrap-Vue">
<p class="my-4">Hello from modal!</p>
<div class="d-block text-center">
<h3>Hello From My Modal!</h3>
</div>
<b-btn class="mt-3" variant="outline-danger" block @click="hideModal(this.show)">Close Me</b-btn>
</b-modal>
</template>
<script>
export default {
name: 'SlideModal',
data () {
return {}
},
props: {
show: {
default: false
}
},
methods: {
showModal (val) {
console.log('showModal triggered')
console.log(val)
this.$refs.myModalRef.show()
},
hideModal (val) {
console.log('hideModal triggered')
console.log(val)
this.$refs.myModalRef.hide()
}
}
}
</script>
<style>
</style>
文件处理不同页面的不同内容，并且希望传递的不仅仅是SlideModal.vue属性
这甚至有可能吗？
答案 0 :(得分：1)
在Table.vue中，clickRow方法中有this.show = true，但是Table.vue没有名为show的数据变量。
但是，您确实有一个不用的变量showModal（据我所知，至少是这样）。
在Table.vue中，从更改代码
<SlideModal :show="this.show ? true : false" />
收件人
<SlideModal :show="this.showModal" />
然后在clickRow方法中，将代码更改为
console.dir(this)
this.show = true
收件人
console.dir(this)
this.showModal = true
编辑：为了使SlideModal正常工作，我认为您需要将其更改为：
<template>
<b-modal ref="myModalRef" title="Bootstrap-Vue">
<p class="my-4">Hello from modal!</p>
<div class="d-block text-center">
<h3>Hello From My Modal!</h3>
</div>
<b-btn class="mt-3" variant="outline-danger" block @click="this.show = false">Close Me</b-btn>
</b-modal>
</template>
<script>
export default {
name: 'SlideModal',
data () {
return {}
},
props: {
show: {
default: false
}
},
watch: {
show (newVal) {
if(newVal) {
this.$refs.myModalRef.show();
} else {
this.$refs.myModalRef.hide();
}
}
}
}
</script>
答案 1 :(得分：0)
下面是带有两个不同文件的示例。 父项文件包含调用代码。组件文件“ AddUser.vue”具有模式代码。
父文件
<template>
<b-button v-b-modal.userModal>Open User Modal</b-button>
<user-modal/> <!-- this is important or you will keep on getting errors -->
</template>
<script>
import UserModal from "@/components/UserModal.vue";
export default {
components: {
UserModal
}
}
UserModal.vue
<template>
<b-modal id="userModal" title="User Modal">
<p class="my-4">Testing Bootstrap Modal</p>
</b-modal>
</template>
这是通过使用 import 在您的视图中包括模态组件，然后在模板代码中引用它来实现的。