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

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

原创最新推荐文章于 2023-12-21 09:15:32 发布 · 454 阅读

0 ·

CC 4.0 BY-SA版权

文章标签：

#vue.js #javascript #html

本文介绍了如何在Vue中实现动态组件，通过按钮点击切换显示不同的组件，例如'hello'组件和'world'组件。利用`:is`属性动态绑定组件名，实现组件内容的动态更新。

<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>