动态组件使用

chnmagnus 发布于2019-08-20 15:21 / 2176人阅读

摘要：动态组件使用动态组件官网解释通过使用保留的元素，动态地绑定到它的特性，我们让多个组件可以使用同一个挂载点，并动态切换组件在变化时改变也可以直接绑定到组件对象上实际项目开发中引入组件动态组件绑定参数显示组件审批拒绝请填写拒绝的原

动态组件使用

动态组件官网解释

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

GPU云服务器云服务器 vuejs动态组件父子组件-动态渲染动态添加组件微信泛型动态添加组件c

文章版权归作者所有，未经允许请勿转载,若此文章存在违规行为，您可以联系管理员删除。

转载请注明本文地址：https://www.ucloud.cn/yun/82192.html

[译] 关于 Angular 动态组件你需要知道的

摘要：第一种方式是使用模块加载器，如果你使用加载器的话，路由在加载子路由模块时也是用的作为模块加载器。还需注意的是，想要使用还需像这样去注册它你当然可以在里使用任何标识，不过路由模块使用标识，所以最好也使用相同。原文链接：Here is what you need to know about dynamic components in Angular showImg(https://se...

lcodecorex 2019-08-26 11:53 评论0 收藏0
Angular 2.x+ 如何动态装载组件

摘要：如何动态装载组件在中我们可以使用方法编译模板达到动态加载组件的目的，然而在中则没有那么简单，下面的例子即为动态加载广告组件的过程。是创建动态组件较好的选择，因为它不会渲染多余的输出。 Angular 2.x+ 如何动态装载组件在 Angular 1.x 中我们可以使用 $compile 方法编译模板达到动态加载组件的目的，然而在 ng2 中则没有那么简单，下面的例子即为动态加载广告组...

Yi_Zhi_Yu 2019-08-20 16:45 评论0 收藏0
Vue动态组件和异步组件

摘要：动态组件如果我们打算在一个地方根据不同的状态引用不同的组件的话，比如页，那么给我们提供动态组件。实现动态组件的加载。的值可以是一个已经注册的组件的名字或者一个组件的选对象。动态组件如果我们打算在一个地方根据不同的状态引用不同的组件的话，比如tab页，那么Vue给我们提供动态组件。基本使用 Parent.vue {{btn.name}} ...

nanchen2251 2019-08-23 14:57 评论0 收藏0
使用form-create动态生成vue组件,支持json格式

摘要：说明文档示例商品名称商品加个创建时间是否显示显示不显示通过建立一个虚拟的方式生成自定义组件生成上面的代码是通过生成器动态生成一个正在加载的按钮组件上面的代码是通过方式动态生成一个按钮组件修改可以通过一下两种方式动态修改组件的配置项通 [github] | [说明文档] 示例 showImg(https://segmentfault.com/img/remote/1460000017...

happyhuangjinjin 2019-08-23 14:48 评论0 收藏0
Angular4 动态加载组件杂谈

摘要：最近接手了一个项目，客户提出了一个高大上的需求要求只有一个主界面，所有组件通过来显示。最近接手了一个项目，客户提出了一个高大上的需求：要求只有一个主界面，所有组件通过Tab来显示。其实这个需求并不诡异，不喜欢界面跳转的客户都非常热衷于这种展现形式。好吧，客户至上，搞定它！这种实现方式在传统的HTML应用中，非常简单，只是在这Angular4（以下简称ng）中，咋个弄呢？我们先来了...

testHs 2019-08-20 17:49 评论0 收藏0
组件(6)：动态组件

摘要：组件的动态切换父组件可以通过元素，在其特性上绑定一个属性，该属性的值表示了一个子组件，可以是一个对象，或字符串子组件名称。可以发现，使用属性观察可用组件个数时始终不超过，这是因为每次切换，旧的组件将被直接移除，下次切换时要重新渲染。组件的动态切换父组件可以通过元素，在其特性is上绑定一个属性，该属性的值表示了一个子组件，可以是一个对象，或字符串（子组件名称）。页面绑定：父组件组件...

eccozhou 2019-08-22 15:25 评论0 收藏0