Vue.js的组件之间的通信 – 动态组件

这次给大家带来vue.js的组件之间的通信 – 动态组件,使用vue.js的组件之间的通信 – 动态组件注意事项有哪些,下面就是实战案例,一起来看一下。

通过使用保留的  元素,并对其 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  }})

登录后复制

keep-alive

立即学习“前端免费学习笔记(深入)”;

如果把切换出去的组件保留在内存中,可以保留它的状态或避免重新渲染。为此可以添加一个 keep-alive 指令参数:

        

登录后复制

相信看了本文案例你已经掌握了方法,更多精彩请关注【创想鸟】其它相关文章!

推荐阅读:

Vue.js的计算属性和数据监听

Vue.js的事件绑定-表单事件绑定

以上就是Vue.js的组件之间的通信 – 动态组件的详细内容,更多请关注【创想鸟】其它相关文章!

版权声明:本文内容由互联网用户自发贡献,该文观点仅代表作者本人。本站仅提供信息存储空间服务,不拥有所有权,不承担相关法律责任。如发现本站有涉嫌抄袭侵权/违法违规的内容, 请发送邮件至253000106@qq.com举报,一经查实,本站将立刻删除。

发布者:PHP中文网,转转请注明出处:https://www.chuangxiangniao.com/p/2783485.html

(0)
上一篇 2025年3月8日 16:50:42
下一篇 2025年3月8日 16:50:47

AD推荐 黄金广告位招租... 更多推荐

相关推荐

  • Vue.js之css实现过度动画

    这次给大家带来vue.js之css实现过度动画,vue.js的css实现过度动画注意事项有哪些,下面就是实战案例,一起来看一下。 transition 动画       Toggle                  I am show  …

    编程技术 2025年3月8日
    200
  • Vue.js之js实现过渡

    这次给大家带来Vue.js之js实现过渡,使用Vue.js的js实现过渡的注意事项有哪些,下面就是实战案例,一起来看一下。 Toggle i am show import comA from ‘./components/a.vue’ imp…

    2025年3月8日
    200
  • Vue.js的自定义指令 directive

    这次给大家带来vue.js的自定义指令 directive,使用vue.js的自定义指令directive的注意事项有哪些,下面就是实战案例,一起来看一下。 以自定义v-css指令为例: 局部指令 export default { //自定…

    2025年3月8日
    200
  • Vue.js的插件

    这次给大家带来vue.js的插件,使用vue.js的插件的注意事项有哪些,下面就是实战案例,一起来看一下。 导入插件(以vue-router为例)执行命令:npm install vue-router –save 如果某个插件需…

    2025年3月8日
    200
  • Vue.js的单位件组件

    这次给大家带来vue.js的单位件组件,使用vue.js单位件组件的注意事项有哪些,下面就是实战案例,一起来看一下。 scoped:局部的如果没有用scoped,那么该样式就会泄漏致全局(所有引入该组件的父组件都会引入这样的样式) 可以根据…

    编程技术 2025年3月8日
    200
  • Vue.js如何设置路由

    这次给大家带来Vue.js如何设置路由,Vue.js设置路由的注意事项有哪些,下面就是实战案例,一起来看一下。 ① 路由map 在main.js中导入vue-router import VRouter from ‘vue-rou…

    2025年3月8日
    200
  • Vue.js的路由参数

    这次给大家带来vue.js的路由参数,使用vue.js的路由参数的注意事项有哪些,下面就是实战案例,一起来看一下。 作用:为页面传递路由参数. 在路由映射表中配置需要传递的参数:比如:apple页面,我需要传递一个color的参数,可以在p…

    2025年3月8日
    200
  • Vue.js的嵌套路由(子路由)

    这次给大家带来vue.js的嵌套路由(子路由),使用vue.js嵌套路由(子路由)的注意事项有哪些,下面就是实战案例,一起来看一下。 children嵌套路由,子路由插入到了父组件apple中 let router = new VRoute…

    2025年3月8日
    200
  • Vue.js路由的其他操作

    这次给大家带来vue.js路由的其他操作,使用vue.js路由其他操作的注意事项有哪些,下面就是实战案例,一起来看一下。 基于当前路径下,跳转到apple    to apple    上面的和下面的区别    to banana 登录后复…

    编程技术 2025年3月8日
    200
  • Vue.js的路由命名和命名视图

    这次给大家带来vue.js的路由命名和命名视图,vue.js路由命名和命名视图的注意事项有哪些,下面就是实战案例,一起来看一下。 路由命名我们可以在设置路由时,给设一个name属性,导航过程中直接:to=”{name: &#82…

    编程技术 2025年3月8日
    200

发表回复

登录后才能评论