动态组件运用

动态组件运用

动态组件官网诠释

经由过程运用保存的 <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;
}
    原文作者:答案在风中飘着
    原文地址: https://segmentfault.com/a/1190000008817141
    本文转自网络文章,转载此文章仅为分享知识,如有侵权,请联系博主进行删除。
点赞