全局组件和局部组件

最新推荐文章于 2023-08-23 17:46:56 发布

诗意亭序

最新推荐文章于 2023-08-23 17:46:56 发布

阅读量204

点赞数

分类专栏：前端

本文链接：https://blog.csdn.net/u011171361/article/details/111187947

版权

前端专栏收录该内容

5 篇文章 0 订阅

订阅专栏

<!DOCTYPE html>
<html lang="en">

<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <!-- 引入样式 -->
    <link rel="stylesheet" href="https://unpkg.com/element-ui/lib/theme-chalk/index.css">

    <title>全局组件和局部组件</title>

</head>

<body>
    <div>
        <div id="app1">
            <label>app1</label>
            <el-row>
                <global-component></global-component>
                <local-component></local-component>
            </el-row>

        </div>
        <br />
        <div id="app2">
            <label>app2</label>
            <el-row>
                <global-component></global-component>
                <!-- 错误，localComponent是局部组件，只能在app1作用域下 -->
                <!-- <local-component></local-component> -->
            </el-row>

        </div>
    </div>
</body>
<!-- import Vue before Element -->
<!-- <script src="https://unpkg.com/vue/dist/vue.js"></script> -->
<script src="https://cdn.jsdelivr.net/npm/vue/dist/vue.js"></script>
<!-- import JavaScript -->
<script src="https://unpkg.com/element-ui/lib/index.js"></script>
<script>
    // 定义全局组件
    Vue.component('globalComponent', {
        template: `<el-button type="success">全局组件按钮</el-button></el-button>`
    });
    new Vue({
        el: "#app1",
        components: {
            localComponent: {
                template: `<el-button type="primary">局部组件按钮</el-button></el-button>`
            }
        }
    });
    new Vue({
        el: "#app2"

    });
</script>

</html>

诗意亭序

关注

0
点赞
踩
0

收藏

觉得还不错? 一键收藏
0
评论
全局组件和局部组件

<!DOCTYPE html><html lang="en"><head> <meta charset="UTF-8"> <meta name="viewport" content="width=device-width, initial-scale=1.0">  <link rel="stylesheet" href="https://unpkg.com/elem.
复制链接

扫一扫