作者:xiejiahui62484 | 来源:互联网 | 2023-10-11 16:06
动态组件运用动态组件官网诠释经由过程运用保存的元素,动态地绑定到它的is特征,我们让多个组件能够运用同一个挂载点,并动态切换:varvmnewVue({el:
动态组件运用
动态组件官网诠释
经由过程运用保存的 元素,动态地绑定到它的 is 特征,我们让多个组件能够运用同一个挂载点,并动态切换:
var vm = new Vue({
el: '#example',
data: {
currentView: 'home'
},
components: {
home: { /* ... */ },
posts: { /* ... */ },
archive: { /* ... */ }
}
})
也能够直接绑定到组件对象上:
var Home = {
template: 'Welcome home!
'
}
var vm = new Vue({
el: '#example',
data: {
currentView: Home
}
})
现实项目开辟中
引入组件
import submitmodal from '../components/SubmitModal';
动态组件 :is 绑定
data参数
submitModal: {
title: '',
show: false,
hasInput: false,
showError: false,
text: '',
type: '',
onOk: function() {}
},
currentView: ''
4.显现组件
let self = this;
self.submitModal.show = true;
self.submitModal.title = '审批谢绝';
self.submitModal.type = 'delete';
self.submitModal.hasInput = true;
self.submitModal.text = '请填写谢绝的缘由';
self.submitModal.OnOk= makeFail;
self.currentView = '';
setTimeout(() => {
self.currentView = 'submitmodal';
}, 1);
封闭组件
on-ok
self.submitModal.show = false;
item.hideOrder = true;
setTimeout(function() {
self.submitModal.input = '';
}, 200);
setTimeout(function() {
self.submitModal.showError = false;
}, 400);
on-close
closesubmitModal: function() {
this.currentView = '';
this.submitModal.input = '';
this.submitModal.show = false;
}