[Vue] Dynamic Vue.js Components with the component element
2023-09-14 08:59:19 时间
You can dynamically switch between components in a template by using the reserved <component>
element and dynamically bind to its is
attribute. By using <keep-alive>
you can tell Vue to keep the component in memory.
Two children components:
<!-- show.vue --> <template> <div> Show Component: <span>{{name}}</span> </div> </template> <script> export default{ name: 'show-component', props: ['name'] } </script>
<!-- edit--> <template> <div> Edit component: <input type="text" v-model="editValue"/> </div> </template> <script> export default{ name: 'edit-component', data(){ return{ editValue: this.name } }, props: ['name'] } </script>
Parent:
<template> <section class="container"> <section> <h3>Dynamic component</h3> <a @click="toggle">{{toggleButton}}</a> <keep-alive> <component v-bind:is="currentView" v-bind:name="message" > </component> </keep-alive> </section> </section> </template> <style scoped> .title { margin: 50px 0; } </style> <script> import ShowComponent from '../components/show'; import EditComponent from '../components/edit'; export default { data() { return { message: 'this is my vue!', currentView: "ShowComponent" } }, computed: { toggleButton: function() { return this.currentView === "ShowComponent" ? 'show': 'Edit'; } }, components: { EditComponent, ShowComponent }, methods: { toggle() { this.currentView = this.currentView === "ShowComponent" ? "EditComponent" : "ShowComponent"; } } } </script>
相关文章
- VUE 安装与入门
- Vue之js的高阶函数
- vue中父组件向子组件传值
- 使用开源Cesium+Vue实现倾斜摄影三维展示
- 每日一学Vue脚手架中基础的ref属性与原生id区别
- vue md5.js_VUE.js
- Vue学习笔记之vue.js 两个等号 == 和三个等号===的区别 数字0和空字符串
- vue使用富文本编辑器tynimce并实现图片上传_富文本编辑器有什么用
- Vue.js 学习笔记 - 组件(Components)
- Vue(renren-fast_vue_master)项目目录结构[通俗易懂]
- Vue调试工具安装(vue devtools)
- VUE官方文档讲解
- 基于SpringBoot和Vue开发的功能强大的图书馆系统(附源码)
- Django simpleUI 修改 element-UI 引用的 index.js 和 index.css 链接 以及 base.html 的 vue 资源链接
- 开心档-软件开发入门之Vue.js Ajax(vue-resource)
- ruoyi-vue版本(十二)用户登陆的逻辑,在线用户的查询与强退出 思路
- Vue结合Redis,加快数据读取速度(vue读取redis)
- 使用Vue从Redis获取数据(vue去redis取数据)
- 从零开始Vue项目中使用Redis(vue使用redis)
- Vue搭配Redis做针对性取值(vue redis取值)
- Oracle Vue网站助力网站创新,让你的网站飞起来(oracle vue网站)