vue.js---利用 is 特性来切换组件

我不是女神ヾ 2023-06-09 07:59 6阅读 0赞

切换组件的方式比较多，可以将组件都引入，使用v-if来切换需要显示的组件，但是这样的写代码冗余还是比较多的，较好的方式是使用 is 特性来切换组件：

点击按钮来改变comp的值，切换子组件；

上代码，父组件：

<template>
    <div class="all">
        <button @click="change('dog')">组件一</button>
        <button @click="change('pig')">组件二</button>
        <component :is="comp"></component> // 使用is特性来切换子组件
    </div>
    </template>
    <script>
    import dog from '../components/dog' // 引入子组件
    import pig from '../components/pig'  // 引入子组件
    export default {
    data () {
    return {
        comp:'dog'
    }
    },
    components:{dog,pig}, // 注册子组件
    methods:{
        change(val){
            this.comp = val
        }
    }
    }
    </script>
    <style lang='scss' scoped>
        button{
            width:70px;height:30px;margin-right:10px;user-select: none;
        }
     
    </style>

两个子组件：

<template>
      <div style="background:blue;width:300px;height:260px;color:skyblue;">这是dog的独有场所</div>
    </template>
    <script>
    export default {
      data() {
        return {};
      }
    };
    </script>
    <style lang='scss' scoped>
    </style>

<template>
      <div style="background:red;width:200px;height:200px;color:skyblue;">这里是pig场所地</div>
    </template>
    <script>
    export default {
      data() {
        return {};
      }
    };
    </script>
    <style lang='scss' scoped>
    </style>

发表评论取消回复

表情：

评论列表（有 0 条评论，6人围观）

还没有评论，来说两句吧...

相关阅读

相关 vue.js---利用 is 特性来切换组件

切换组件的方式比较多，可以将组件都引入，使用v-if来切换需要显示的组件，但是这样的写代码冗余还是比较多的，较好的方式是使用 is 特性来切换组件：点击按钮来改变comp的

我不是女神ヾ/ 2023年06月09日 07:59/ 0 赞/ 7 阅读

相关 vue组件改变标签属性is的值来动态切换组件内容

首先描述一下我们经常在项目中遇到的需求：比如我们要写一个弹窗，弹窗里显示的是表单内容，但是表单内容会根据进入前选择的状态不通显示的表单内容不通，也就是说，这个弹窗里面有多

灰太狼/ 2023年01月05日 14:28/ 0 赞/ 171 阅读

相关 Vuejs——（13）组件——杂项

本篇资料来于官方文档： http://cn.vuejs.org/guide/components.html\u6742\_u9879 本文是在官方文档的基础上，更加细

╰+攻爆jí腚メ/ 2022年09月25日 12:15/ 0 赞/ 313 阅读

相关 Vuejs——（12）组件——动态组件

本篇资料来于官方文档： http://cn.vuejs.org/guide/components.html\u52A8\_u6001\_u7EC4\_u4EF6 本文

古城微笑少年丶/ 2022年09月25日 12:15/ 0 赞/ 319 阅读

相关 Vuejs——（10）组件——父子组件通信

本篇资料来于官方文档： http://cn.vuejs.org/guide/components.html\u7236\_u5B50\_u7EC4\_u4EF6\_u9

不念不忘少年蓝@/ 2022年07月18日 04:12/ 0 赞/ 378 阅读

相关 Vuejs——（10）组件——父子组件通信

本篇资料来于官方文档： http://cn.vuejs.org/guide/components.html\u7236\_u5B50\_u7EC4\_u4EF6\_u901A

￡神魔★判官ぃ/ 2022年07月12日 08:26/ 0 赞/ 380 阅读

相关 vuejs的组件

组件的基本使用注册组件组件注册就是利用`Vue.component()`方法，先传入一个自定义组件的名字，然后传入这个组件的配置。 Vue.compo

╰+哭是因爲堅強的太久メ/ 2022年05月24日 06:50/ 0 赞/ 334 阅读

相关 vuejs的：is和is使用和区别

在vue.js组件教程的一开始提及到了`is特性：：` 意思就是有些元素，比如ul里面只能直接包含li元素，像这样： <ul> <li></l

雨点打透心脏的1/2处/ 2022年05月24日 06:49/ 0 赞/ 215 阅读

相关 Vuejs——组件——slot内容分发

> 本篇资料来于官方文档： > > [http://cn.vuejs.org/guide/components.html\u4F7F\_u7528\_Slot\_\_u520

梦里梦外;/ 2022年05月20日 02:49/ 0 赞/ 308 阅读

相关通过component标签加上is属性动态切换组件

核心代码： <template> <div> ============================66、通过component标签加

Love The Way You Lie/ 2021年12月15日 20:53/ 0 赞/ 615 阅读