vue.js 动态组件详解
更新时间:2021年09月14日 09:57:53 作者:猫老板的豆
这篇文章主要介绍了vue.js 动态组件详解,本篇文章通过简要的案例,讲解了该项技术的了解与使用,以下就是详细内容,需要的朋友可以参考下
:is 动态组件
使用 v-bind:is=”组件名”,会自动去找匹配的组件名,如果没有,则不显示;
<div id="app"> <test v-bind:is="which_to_show"></test> </div> <script> var demo = new Vue({ el: "#app", data: { which_to_show: "first" }, components: { first: { template: "<div>这里是子组件first</div>" }, second: { template: "<div>这里是子组件second</div>" }, third: { template: "<div>这里是子组件third</div>" } } }); </script>
通过改变 which_to_show 的值就可以动态改变想要加载渲染的组件,如下:
到此这篇关于vue.js 动态组件详解的文章就介绍到这了,更多相关vue.js 动态组件内容请搜索脚本之家以前的文章或继续浏览下面的相关文章希望大家以后多多支持脚本之家!
相关文章
vue antd的from表单中验证rules中type的坑记录
这篇文章主要介绍了vue antd的from表单中验证rules中type的坑记录,具有很好的参考价值,希望对大家有所帮助。如有错误或未考虑完全的地方,望不吝赐教2023-04-04
最新评论