Vue组件的使用

最新推荐文章于 2023-06-05 16:02:56 发布

Shine-Bryant

最新推荐文章于 2023-06-05 16:02:56 发布

阅读量49

点赞数

分类专栏： Vue 文章标签： vue

本文链接：https://blog.csdn.net/m0_51547144/article/details/117871560

版权

Vue 专栏收录该内容

3 篇文章 0 订阅

订阅专栏

什么是组件？

在这里插入图片描述
上图为Vue官网提供的一张图，我将组件理解为java中的抽象和封装，即将相同的部分进行抽取出来然后进行封装成一个组件，然后每次可以很方便的去使用。

全局组件

全局组件可以在

中的其他模板中使用，但不能嵌套在其他组件中，也不能嵌套其他组件。

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>Title</title>
    <script src="./vue.js"></script>
    <style>
        p{
            width: 150px;
            height: 150px;
            background-color: cyan;
        }
    </style>
</head>
<body>
    <div id="app">
        <!--组件的引用-->
        <overall></overall>
    </div>
    <!--组件的模板-->
    <template id="tmp1">
        <p></p>
    </template>
</body>
</html>
<script>
    //组件的注册
    Vue.component("overall",{
        template:"#tmp1"
    })
    var vm = new Vue({
        el:"#app"
    })
</script>

运行结果：
在这里插入图片描述
注意：全局组件要放在script标签最前面，否则不会生效

局部组件

var vm = new Vue({
        el:"#app",
        data:{},
        //注册组件: 局部组件
        //注意：
        // 1.组件的名字不能是已有标签的名字，比如:div、p、a
        // 2.当组件的名称为驼峰时 ：syTest3，使用组件时应该将变成：sy-test3
        // 3.局部组件只能在根组件使用
        // 4.局部组件不能嵌套使用
        // 5.局部组件中不能加文本
        components:{
            sy:{
                template:"#test1",
                //组件的数据是函数
                data(){
                    return {
                        msg: 1
                    };
                },
                methods:{
                    add(){
                        this.msg++;
                    }
                }
            },
            sy2:{
                template: "#test2",
                data(){
                    return {
                        arr: [1,2,3,4,5]
                    }
                }
            },
            syTest3:{
                template:"#test1"
            }

        }

    })

局部组件要在Vue实例中的components中进行注册，使用时直接引用组件名即可。
注意：

组件的名字不能是已有标签的名称，比如：div、p、a、ul等关键词
当组件的名称为驼峰命名法时，比如：componentTest，使用时应变为：<component-test>
局部组件只能在根组件中使用
局部组件不能嵌套使用
局部组件中使用文本无效

Shine-Bryant

关注

0
点赞
踩
0

收藏

觉得还不错? 一键收藏
0
评论
Vue组件的使用

什么是组件？上图为Vue官网提供的一张图，我将组件理解为java中的抽象和封装，即将相同的部分进行抽取出来然后进行封装成一个组件，然后每次可以很方便的去使用。全局组件全局组件可以在中的其他模板中使用，但不能嵌套在其他组件中，也不能嵌套其他组件。<!DOCTYPE html><html lang="en"><head> <meta charset="UTF-8"> <title>Title</title>
复制链接

扫一扫

专栏目录