Vue 局部组件使用和注意事项

最新推荐文章于 2022-01-27 17:36:34 发布

书院二层楼

最新推荐文章于 2022-01-27 17:36:34 发布

阅读量220

点赞数

分类专栏： Vue 文章标签： Vue Vue局部组件使用

本文链接：https://blog.csdn.net/caoxinjian423/article/details/108895274

版权

Vue 专栏收录该内容

62 篇文章 2 订阅

订阅专栏

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <script src="https://cdn.jsdelivr.net/npm/vue/dist/vue.js"></script>
    <title>局部注册组件</title>
</head>
<body>
    <div id="test">

    </div>

    <script>

        const ComponentB = {
            template:`
            <div>
                我是局部组件B
            </div>`,
            };
        
        const ComponentC = {
            //vue2必须要有根元素包括，比如div
            template:`
            <div>
                我是局部组件C
            </div>`,
            };
        Vue.component("ComponentA", {
            //在哪里注册，在哪里使用
            components: {
                ComponentB,
                ComponentC,
            },
            template:`
            <div>
                这是组件A,参数count为{{count}}
                <ComponentB></ComponentB>
                <ComponentC></ComponentC>
            </div>
            `,
            //data必须是函数，因为如果是组件，多个上级组件共用时，会引起混乱
            data() {
                return {
                    count:8
                }
            },
        })
        const app = new Vue({
            el:"#test",
            data:{

            },
            template:`
            <div>
                <ComponentA></ComponentA>
            </div>
            `
        })
    </script>
</body>
</html>

效果截图：

书院二层楼

关注

0
点赞
踩
1

收藏

觉得还不错? 一键收藏
0
评论
Vue 局部组件使用和注意事项

<!DOCTYPE html><html lang="en"><head> <meta charset="UTF-8"> <meta name="viewport" content="width=device-width, initial-scale=1.0"> <script src="https://cdn.jsdelivr.net/npm/vue/dist/vue.js"></script&gt.
复制链接

扫一扫