动态组件使用

通过使用保留的 <component> 元素，动态地绑定到它的 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 }})

实际项目开发中

1. 引入组件

   import submitmodal from '../components/SubmitModal';

2. 动态组件 :is 绑定

1. 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);

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;}