- 首页
- 前端开发
- 如何在 vue js 中重用我的模态组件(重新渲染问题)
如何在 vue js 中重用我的模态组件(重新渲染问题)
[英] how to re-use my modal component ( re-render issue) in vue js
本文介绍了如何在 vue js 中重用我的模态组件(重新渲染问题)的处理方法，对大家解决问题具有一定的参考价值，需要的朋友们下面随着小编来一起学习吧！
问题描述
我打开相同的组件内容，因为我有不同的内容，(渲染问题)
我有一个名为 modal.vue 的模态组件(可重用)所以每次我创建一个组件时，我都会调用模态组件并注入新的内容，
问题是:我有两个组件( country.vue 和 city.vue )我在 index.vue 中导入了它们
但是每次我点击城市按钮加载城市组件时，我都会加载国家模式，就像渲染问题一样(我无法重新渲染)
有人可以向我解释解决方案吗，这是我的代码
modal.vue(可重复使用)
<div class="right-bar";:class="(size == null) ?'right-bar-35':尺寸"><simplebar 类=h-100"><div class="rightbar-title px-3 py-4"><div class="row"><div class="col-lg-10"><h5 class="m-0">{{title}}</h5>
<div class="col-lg-2 text-right"><span class="clickable";@click=hideRightSidebar"><i class=mdi mdi-close-thick"></i></span>
<div class="px-3 py-4"><插槽/>
<footer class="modal-footer"><按钮类型=按钮"class =btn btn-secondary"style="float:left;">Cancel</button><插槽名称=页脚"/></页脚></simplebar>
</模板>
如您所见，我的组件中有一个
这是我的 country.vue 组件(我在这里使用 modal.vue 组件)
<div><button class="btn btn-sm btn-white";@click=init">过滤器<i class=mdi mdi-filter"></i></button><模态标题=国家"v-if=showModal">我是乡村模式</modal></模板><脚本>从@/components/modal"导入 RightBar；导出默认{数据() {返回 {显示模式:假}},成分:{模态，},方法: {初始化:函数(){this.showModal= 真；}}}
这是我的 city.vue 组件(我在这里使用 modal.vue 组件)
<div><button class="btn btn-sm btn-white";@click=init">过滤器<i class=mdi mdi-filter"></i></button><模态标题=城市"v-if=showModal">我是城市模式</modal></模板><脚本>从@/components/modal"导入 RightBar；导出默认{数据() {返回 {显示模式:假}},成分:{模态，},方法: {初始化:函数(){this.showModal= 真；}}}
这是我的 index.vue(我加载 city.vue 和 country.vue 的地方)，因为你可以看到我的两个组件都有一个按钮
<div><城市></城市><国家></国家></模板><脚本>从./city.vue"导入 addContact；从./country.vue"导入过滤器联系人；导出默认{组件:{城市，国家}数据(){返回 {}}}
所以当我点击城市时，我看到国家模式(重新渲染问题)我该如何解决
解决方案
举个例子:
在城市和国家组件中添加一个函数，告诉父组件将进行重新渲染.单击显示模式按钮后，您将调用此函数.
init(){this.render()this.showModal= 真},重新渲染(){this.$emit('forceRerender', true)}
然后在父组件中我们将监听这个函数并重新渲染.
{this.isCountry=真})},隐藏城市(){this.isCity=假this.$nextTick(()=>{this.isCity=真})}}
分解它.当我们想从城市组件加载模态时，我们告诉国家组件首先关闭模态.我希望这对你有用.
使用 switch 语句的另一种方式:
城市:
render(){this.$emit('forceRerender', 'city')}
国家:
render(){this.$emit('forceRerender', 'country')}
父组件:
{this.isCountry = 真})休息案例国家":this.isCountry = 真this.isCity = falsethis.$nextTick().then(()=>{this.isCity= 真})休息默认:this.isCountry = this.isCity = true休息}}
I'm opening the same component content since i have a different ones, ( Rendering problem )
I have a modal component called modal.vue (Re-usable)
so each time I create a component I call the modal component and I inject new content,
The problem is : I have two-component ( country.vue & city.vue ) I import both of them in my index.vue
but each time I click on a city button to load city component, I load the country modal, just like there is a rendering problem ( i can't re-render )
can someone explain to me the solution please, this is my code
modal.vue ( re-usable )
<template>
<div class="right-bar" :class="(size == null) ? 'right-bar-35' : size">
<simplebar class="h-100">
<div class="rightbar-title px-3 py-4">
<div class="row">
<div class="col-lg-10">
<h5 class="m-0">{{title}}</h5>
</div>
<div class="col-lg-2 text-right">
<span class="clickable" @click="hideRightSidebar"><i class="mdi mdi-close-thick"></i></span>
</div>
</div>
</div>
<div class="px-3 py-4">
<slot/>
</div>
<footer class="modal-footer">
<button type="button" class="btn btn-secondary" style="float:left;">Cancel</button>
<slot name="footer"/>
</footer>
</simplebar>
</div>
</template>
as you can see i have a <slot/> in my component so each time in inject a new content.
This is my country.vue component ( i use here modal.vue component )
<template>
<div>
<button class="btn btn-sm btn-white" @click="init">Filter <i class="mdi mdi-filter"></i></button>
<modal title="countries" v-if="showModal">
i 'am the country modal
</modal>
</div>
</template>
<script>
import RightBar from "@/components/modal";
export default {
data() {
return {
showModal: false
}
},
components:{
modal,
},
methods: {
init: function(){
this.showModal= true;
}
}
}
</script>
This is my city.vue component ( i use here modal.vue component )
<template>
<div>
<button class="btn btn-sm btn-white" @click="init">Filter <i class="mdi mdi-filter"></i></button>
<modal title="cities" v-if="showModal">
i 'am the citymodal
</modal>
</div>
</template>
<script>
import RightBar from "@/components/modal";
export default {
data() {
return {
showModal: false
}
},
components:{
modal,
},
methods: {
init: function(){
this.showModal= true;
}
}
}
</script>
This is my index.vue ( where i load city.vue & country.vue ) as you can see both of my components have a button
<template>
<div>
<city></city>
<country></country>
</div>
</template>
<script>
import addContact from "./city.vue";
import filterContact from "./country.vue";
export default {
components:{city,country}
data(){
return {
}
}
}
</script>
So when i click on city i see the country modal ( re-rendering problem ) how can i solve that
解决方案
Here's an example:
in city and country component add a function that tells the parent component that there will be a rerendering. you call this function once you click on the show modal button.
init(){
this.rerender()
this.showModal= true
},
rerender(){
this.$emit('forceRerender', true)
}
then in the parent component we'll listen to this function and rerender.
<city v-if="isCountry" v-on:forceRerender="hideCountry" />
<country v-if="isCity" v-on:forceRerender="hideCity" />
data(){
return{
isCountry: true,
isCity: true,
}
},
methods:{
hideCountry(){
this.isCountry= false
this.$nextTick(()=>{
this.isCountry= ture
})
},
hideCity(){
this.isCity= false
this.$nextTick(()=>{
this.isCity= ture
})
}
}
to break it down. when we want to load the modal from the city component we tell the country component to close the modal first. I hope this works for you.
another way with a switch statement:
city:
rerender(){
this.$emit('forceRerender', 'city')
}
country:
rerender(){
this.$emit('forceRerender', 'country')
}
parent component:
<city v-if="isCountry" v-on:forceRerender="setActiveElement" />
<country v-if="isCity" v-on:forceRerender="setActiveElement" />
setActiveElement(element){
switch(element){
case 'city':
this.isCity = true
this.isCountry = false
this.$nextTick().then(()=>{
this.isCountry = true
})
break
case 'country':
this.isCountry = true
this.isCity = false
this.$nextTick().then(()=>{
this.isCity= true
})
break
default:
this.isCountry = this.isCity = true
break
}
}
这篇关于如何在 vue js 中重用我的模态组件(重新渲染问题)的文章就介绍到这了，希望我们推荐的答案对大家有所帮助，也希望大家多多支持IT屋！
查看全文
