• Vue.js之动态绑定组件

    本文主要介绍Vue.js中如何进行组件的动态切换。

    核心：通过is绑定需要展示的组件名，component为占位符。

    下面实例定义了child1和child2两个组件，点击按钮可实现两者的动态切换。

    1. html>
    2. <html lang="en">
    3.  
    4. <head>
    5.     <meta charset="UTF-8">
    6.     <meta http-equiv="X-UA-Compatible" content="IE=edge">
    7.     <meta name="viewport" content="width=device-width, initial-scale=1.0">
    8.     <title>Documenttitle>
    9. head>
    10.  
    11. <body>
    12.     <div id="app">
    13.         <component :is="type">component>
    14.         <div>
    15.             <button @click="change">点击button>
    16.         div>
    17.     div>
    18.     <script src="./vue.min.js">script>
    19.     <script>
    20.         const child1 = {
    21.             template: `
      •                 
      • 子
    23. 组
  • 间
  • 1
  • `,
  • methods: {},
  • data() {
  • return {
  • }
  • }
  • };
  • const child2 = {
  • template: `
    子组件2
    `    ,
  • methods: {
  • },
  • data() {
  • return {
  • }
  • }
  • };
  • const vm = new Vue({
  • el: "#app",
  • data() {
  • return {
  • type: 'child1'
  • }
  • },
  • methods: {
  • change() {
  • this.type = this.type == 'child1' ? 'child2' : 'child1';
  • }
  • },
  • components: {
  • child1,
  • child2
  • }
  • })
  • script>
  • body>
  • html>

  • 相关阅读:
    原神启动原神启动原神启动原神启动
    2022-08-11 第六小组 瞒春 学习笔记
    高性能数据访问中间件 OBProxy（三）：问题排查和服务运维
    EMQX 4.x 版本更新：Kafka 与 RocketMQ 集成安全增强
    Web前端大作业—电影网页介绍8页(html+css+javascript) 带登录注册表单
    0027【Edabit ★☆☆☆☆☆】Fix the Expression
    【Excel小技巧】如何为Sheet特定区域/单元格设置“密码“/“不可编辑“
    【Java 进阶篇】CSS 选择器详解
    MySQL常用函数
    【牛客刷题】前端--JS篇（二）
  • 原文地址：https://blog.csdn.net/weixin_44827643/article/details/126302852