动态组件使用

动态组件使用

动态组件官网解释

通过使用保留的 <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
 }
})

实际项目开发中

1. 引入组件

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

2. 动态组件 :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>

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