文章详情

短信预约-IT技能 免费直播动态提醒

请输入下面的图形验证码

提交验证

短信预约提醒成功

如何解析Vue中动态组件怎么使用

2023-06-25 14:36

关注

如何解析Vue中动态组件怎么使用,针对这个问题,这篇文章详细介绍了相对应的分析和解答,希望可以帮助更多想解决这个问题的小伙伴找到更简单易行的方法。

动态组件在开发的过程中大多数情况下都会用到,当我们需要在不同的组件之间进行状态切换时,动态组件可以很好的满足我们的需求,其中的核心是component标签和is属性的使用。

<div id="app">  <button @click="changeTabs('child1')">child1</button>  <button @click="changeTabs('child2')">child2</button>  <button @click="changeTabs('child3')">child3</button>  <component :is="chooseTabs">  </component></div>
// jsvar child1 = {  template: '<div>content1</div>',}var child2 = {  template: '<div>content2</div>'}var child3 = {  template: '<div>content3</div>'}var vm = new Vue({  el: '#app',  components: {    child1,    child2,    child3  },  methods: {    changeTabs(tab) {      this.chooseTabs = tab;    }  }})

例子是一个动态组件的基本使用场景,当点击按钮时,视图根据this.chooseTabs值在组件child1,child2,child3间切换。

AST解析

<component>的解读和前面几篇内容一致,会从AST解析阶段说起,过程也不会专注每一个细节,而是把和以往处理方式不同的地方特别说明。针对动态组件解析的差异,集中在processComponent上,由于标签上is属性的存在,它会在最终的ast树上打上component属性的标志。

//  针对动态组件的解析function processComponent (el) {  var binding;  // 拿到is属性所对应的值  if ((binding = getBindingAttr(el, 'is'))) {    // ast树上多了component的属性    el.component = binding;  }  if (getAndRemoveAttr(el, 'inline-template') != null) {    el.inlineTemplate = true;  }}

如何解析Vue中动态组件怎么使用

render函数

有了ast树,接下来是根据ast树生成可执行的render函数,由于有component属性,render函数的产生过程会走genComponent分支。

// render函数生成函数var code = generate(ast, options);// generate函数的实现function generate (ast,options) {  var state = new CodegenState(options);  var code = ast ? genElement(ast, state) : '_c("div")';  return {    render: ("with(this){return " + code + "}"),    staticRenderFns: state.staticRenderFns  }}function genElement(el, state) {  ···  var code;  // 动态组件分支  if (el.component) {    code = genComponent(el.component, el, state);  }}

针对动态组件的处理逻辑其实很简单,当没有内联模板标志时(后面会讲),拿到后续的子节点进行拼接,和普通组件唯一的区别在于,_c的第一个参数不再是一个指定的字符串,而是一个代表组件的变量

// 针对动态组件的处理  function genComponent (    componentName,    el,    state  ) {    // 拥有inlineTemplate属性时,children为null    var children = el.inlineTemplate ? null : genChildren(el, state, true);    return ("_c(" + componentName + "," + (genData$2(el, state)) + (children ? ("," + children) : '') + ")")  }

普通组件和动态组件的对比

"with(this){return _c('div',{attrs:{"id":"app"}},[_c('child1',[_v(_s(test))])],1)}"
动态组件的render函数
with(this){return _c('div',{attrs:{"id":"app"}},[_c(chooseTabs,{tag:"component"})],1)}

简单的总结,动态组件和普通组件的区别在于:

有了render函数,接下来从vnode到真实节点的过程和普通组件在流程和思路上基本一致。

关于如何解析Vue中动态组件怎么使用问题的解答就分享到这里了,希望以上内容可以对大家有一定的帮助,如果你还有很多疑惑没有解开,可以关注编程网行业资讯频道了解更多相关知识。

阅读原文内容投诉

免责声明:

① 本站未注明“稿件来源”的信息均来自网络整理。其文字、图片和音视频稿件的所属权归原作者所有。本站收集整理出于非商业性的教育和科研之目的,并不意味着本站赞同其观点或证实其内容的真实性。仅作为临时的测试数据,供内部测试之用。本站并未授权任何人以任何方式主动获取本站任何信息。

② 本站未注明“稿件来源”的临时测试数据将在测试完成后最终做删除处理。有问题或投稿请发送至: 邮箱/279061341@qq.com QQ/279061341

软考中级精品资料免费领

  • 历年真题答案解析
  • 备考技巧名师总结
  • 高频考点精准押题
  • 2024年上半年信息系统项目管理师第二批次真题及答案解析(完整版)

    难度     813人已做
    查看
  • 【考后总结】2024年5月26日信息系统项目管理师第2批次考情分析

    难度     354人已做
    查看
  • 【考后总结】2024年5月25日信息系统项目管理师第1批次考情分析

    难度     318人已做
    查看
  • 2024年上半年软考高项第一、二批次真题考点汇总(完整版)

    难度     435人已做
    查看
  • 2024年上半年系统架构设计师考试综合知识真题

    难度     224人已做
    查看

相关文章

发现更多好内容

猜你喜欢

AI推送时光机
位置:首页-资讯-后端开发
咦!没有更多了?去看看其它编程学习网 内容吧
首页课程
资料下载
问答资讯