Vue组件

Posted 2020-12-23 zhilili

tags:

篇首语：本文由小常识网(cha138.com)小编为大家整理，主要介绍了Vue组件相关的知识，希望对你有一定的参考价值。

Vue组件的使用：

全局组件注册语法：

　　Vue.component(组件名称，{data:组件数据，template:组件的模板内容})

定义了一个组件：

<!DOCTYPE html>
<html lang="en">
    <head>
        <meta charset="UTF-8">
        <title>Document</title>
    </head>

    <body>
        <div id="app">
            <!--使用组件-->
            <button-counter></button-counter>
        </div>

        <script type="text/javascript"src="js/vue.js"></script>
        <script type="text/javascript">
            /*注册全局组件*/
            Vue.component(‘button-counter‘,{
                /*data一定要使用函数返回数据，不然调用多个相同的组件时候，会共用一份数据*/
                data:function(){
                    return{
                        count:0
                    }
                },
                /*template实际就是一个字符串*/
               // template:‘<button @click="count++">点击了{{count}}次</button>‘,
                template:‘<button @click="handle">点击了{{count}}次</button>‘,
                /*也可以使用methods*/
                methods:{
                    handle:function(){
                        //this指的是该组件，不能少
                        this.count+=2;
                    }
                }
            })

            var vm=new Vue({
                el:‘#app‘,
                data:{

                }
            })
        </script>
    </body>
</html>

全部组件注册的注意事项：

1，data必须是一个函数

2，组件模板内容必须是单个的根元素

3，组件模板内容可以是模板字符串

局部组件的使用：

在Vue实例中使用components属性，

<!DOCTYPE html>
<html lang="en">
    <head>
        <meta charset="UTF-8">
        <title>Document</title>
    </head>

    <body>
        <div id="app">
            <!--使用组件-->
            <hello-world1></hello-world1>
            <hello-world2></hello-world2>
            <hello-world3></hello-world3>
        </div>

        <script type="text/javascript"src="js/vue.js"></script>
        <script type="text/javascript">
            /*创建局部组件*/
            var HelloWorldA={
                data:function(){
                    return{
                        msg:"helloworld1",
                    }
                },
                template:"<div>{{msg}}</div>"
            };
            var HelloWorldB={
                data:function(){
                    return{
                        msg:"helloworld2",
                    }
                },
                template:"<div>{{msg}}</div>"
            };
            var HelloWorldC={
                data:function(){
                    return{
                        msg:"helloworld3",
                    }
                },
                template:"<div>{{msg}}</div>"
            };
            var vm=new Vue({
                el:‘#app‘,
                data:{

                },
                /*使用局部组件*/
                components:{
                    ‘hello-world1‘:HelloWorldA,
                    ‘hello-world2‘:HelloWorldB,
                    ‘hello-world3‘:HelloWorldC
                }
            })
        </script>
    </body>
</html>

局部组件注意事项：

　　1，局部组件只能在父组件中使用，全局组件中是不可以使用局部组件的

以上是关于Vue组件的主要内容，如果未能解决你的问题，请参考以下文章

vue3中的fragment（片段）组件

vue.js 2 - 将单个文件组件的 html 片段提取到独立文件中

Vue组件之全局组件与局部组件

vue-个人学习----组件

vue视频学习笔记05