动态组件（让多个组件使用同一个挂载点，并动态切换，这就是动态组件）

最新推荐文章于 2023-12-21 09:15:32 发布

zhangli0421

最新推荐文章于 2023-12-21 09:15:32 发布

阅读量399

点赞数

文章标签： vue.js javascript html

本文链接：https://blog.csdn.net/zhangli0421/article/details/120744671

版权

Vue 动态组件数据绑定模板组件切换

关键词由CSDN通过智能技术生成

<body>
        <!-- 让多个组件使用同一个挂载点，并动态切换，这就是动态组件 -->
        <div id="app">
            <input type="button" value="第一个组件" @click="aa='hello'">
            <input type="button" value="第二个组件" @click="aa='world'">
            <component :is="aa"></component>
        </div>
</body>
<script>
      let vm = new Vue({
        el: "#app",
        data: {
            msg: "水电费水电费",
            aa: "hello",
        },
        components: {
            'hello': {
                template: '<h1>我是hello组件</h1>'
            },
            'world': {
                template: '<h1>我是world组件</h1>'
            },
        }
    })
</script>

确定要放弃本次机会？

福利倒计时

: :

立减 ¥

普通VIP年卡可用

立即使用

zhangli0421

关注关注

0
点赞
踩
0

收藏

觉得还不错? 一键收藏
0
评论
动态组件（让多个组件使用同一个挂载点，并动态切换，这就是动态组件）

<body>  <div id="app"> <input type="button" value="第一个组件" @click="aa='hello'"> <input type="button" value="第二个组件" @click="aa='world'"> &l.
复制链接

扫一扫