DDR爱好者之家

Vue.extend 编程式插入组件的实现
站长资源 2024/11/24 佚名
20 1538
DDR爱好者之家 Design By 杰米

前言

日常中我们要使用一个弹框组件的方式通常是先通过Vue.component 全局或是 component 局部注册后，然后在模版中使用。接下来我们尝试编程式的使用组件。

实现

其实步骤很简单

  1. 通过 Vue.extend() 创建构造器
  2. 通过 Vue.$mount() 挂载到目标元素上
  3. 目标实现一个 alert 弹框，确认和取消功能如下图

Vue.extend 编程式插入组件的实现

document.createElement

其实想要插入一个元素，通过 document.createElement 就可以实现，并非一定需要上面两步，但是涉及到组件的复杂度、样式设置、可维护性所以使用创建构造器的方式比较可行。

Vue.extend()

首先来定义这个弹框的结构和样式，就是正常的写组件即可

<template>
 <div class="grid">
   <h1 class="head">这里是标题</h1>
   <div @click="close">{{ cancelText }}</div>
   <div @click="onSureClick">{{ sureText }}</div>
 </div>
</template>
<script>
export default {
 props:{
  close:{
   type:Function,
   default:()=>{}
  },
  cancelText:{
   type:String,
   default:'取消'
  },
  sureText:{
   type:String,
   default:'确定'
  }
 },
 methods:{
  onSureClick(){
   // 其他逻辑
   this.close()
  }
 }
};
</script>

将创建构造器和挂载到目标元素上的逻辑抽离出来，多处可以复用

export function extendComponents(component,callback){
 const Action = Vue.extend(component)
 const div = document.createElement('div')
 document.body.appendChild(div)
 const ele = new Action({
  propsData:{
   cancelText:'cancel',
   sureText:'sure',
   close:()=>{
    ele.$el.remove()
    callback&&callback()
   }
  }
 }).$mount(div)
}

上面代码需要注意以下几点：

  1. Vue.extend 获得是一个构造函数，可以通过实例化生成一个 Vue 实例
  2. 实例化时可以向这个实例传入参数，但是需要注意的是 props 的值需要通过 propsData 属性来传递
  3. 得到 Vue 实例后，我们需要通过一个目标元素来挂载它，有人首先会想到挂载到 #app 上，这个挂载的过程是将目标元素的内容全部替换，所以一旦挂载到 #app 上，该元素的所有子元素都会消失被替换
  4. 针对第3点，所以创建了一个 div 元素插入到 body 中，我们将想要挂载的内容替换到这个div上

Vue.extend 和 Vue.component component 的区别

  1. Vue.component component两者都是需要先进行组件注册后，然后在 template 中使用注册的标签名来实现组件的使用。Vue.extend 则是编程式的写法
  2. 关于组件的显示与否，需要在父组件中传入一个状态来控制 或者 在组件外部用 v-if/v-show 来实现控制，而 Vue.extend 的显示与否是手动的去做组件的挂载和销毁。
  3. Vue.component component 在组件中需要使用 slot 等自定义UI时更加灵活，而 Vue.extend 由于没有 template的使用，没有slot 都是通过 props 来控制UI，更加局限一些。

以上就是本文的全部内容，希望对大家的学习有所帮助，也希望大家多多支持。

DDR爱好者之家 Design By 杰米
广告合作：本站广告合作请联系QQ：858582 申请时备注：广告合作（否则不回）
免责声明：本站资源来自互联网收集,仅供用于学习和交流,请遵循相关法律法规,本站一切资源不代表本站立场,如有侵权、后门、不妥请联系本站删除！
DDR爱好者之家 Design By 杰米
ddrfans.com DDR爱好者之家
8,675无损音乐
1,324高清电影
213破解软件
70,141收录资讯

《魔兽世界》大逃杀！60人新游玩模式《强袭风暴》3月21日上线

暴雪近日发布了《魔兽世界》10.2.6 更新内容，新游玩模式《强袭风暴》即将于3月21 日在亚服上线，届时玩家将前往阿拉希高地展开一场 60 人大逃杀对战。

艾泽拉斯的冒险者已经征服了艾泽拉斯的大地及遥远的彼岸。他们在对抗世界上最致命的敌人时展现出过人的手腕，并且成功阻止终结宇宙等级的威胁。当他们在为即将于《魔兽世界》资料片《地心之战》中来袭的萨拉塔斯势力做战斗准备时，他们还需要在熟悉的阿拉希高地面对一个全新的敌人──那就是彼此。在《巨龙崛起》10.2.6 更新的《强袭风暴》中，玩家将会进入一个全新的海盗主题大逃杀式限时活动，其中包含极高的风险和史诗级的奖励。

《强袭风暴》不是普通的战场，作为一个独立于主游戏之外的活动，玩家可以用大逃杀的风格来体验《魔兽世界》，不分职业、不分装备（除了你在赛局中捡到的），光是技巧和战略的强弱之分就能决定出谁才是能坚持到最后的赢家。本次活动将会开放单人和双人模式，玩家在加入海盗主题的预赛大厅区域前，可以从强袭风暴角色画面新增好友。游玩游戏将可以累计名望轨迹，《巨龙崛起》和《魔兽世界：巫妖王之怒 经典版》的玩家都可以获得奖励。

更新日志

友情链接

杰晶网络 DDR爱好者之家 南强小屋 黑松山资源网 白云城资源网
DDR爱好者之家 Design By 杰米