动态组件运用
经由过程运用保存的 <component> 元素,动态地绑定到它的 is 特征,我们让多个组件能够运用同一个挂载点,并动态切换:
var vm = new Vue({
el: '#example',
data: {
currentView: 'home'
},
components: {
home: { /* ... */ },
posts: { /* ... */ },
archive: { /* ... */ }
}
})
<component v-bind:is="currentView">
<!-- 组件在 vm.currentview 变化时转变! -->
</component>
也能够直接绑定到组件对象上:
var Home = {
template: '<p>Welcome home!</p>'
}
var vm = new Vue({
el: '#example',
data: {
currentView: Home
}
})
现实项目开辟中
引入组件
import submitmodal from '../components/SubmitModal';
动态组件 :is 绑定
<component :is="currentView" :title="submitModal.title" :show.sync="submitModal.show" :text="submitModal.text" :on-close="closesubmitModal" :on-ok="submitModal.onOk" :type="submitModal.type" :hasinput="submitModal.hasInput" :input.sync="submitModal.input"></component>
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;
}