《Vue学习笔记》-组件-创建组件的方式及相关细节_创建组件linesensor时需要指定什么点和什么点-优快云博客

本文链接：https://blog.youkuaiyun.com/STUDENTstudent123/article/details/97943517

本文深入解析Vue中组件的六种创建方法，包括全局组件、私有组件、组件内的data和methods使用，以及为何data需为函数。通过实例代码，详细阐述了每种方式的特点和应用场景。

摘要生成于 C知道，由 DeepSeek-R1 满血版支持，前往体验 >

《Vue学习笔记》-组件-创建组件的方式及相关细节

5.组件-组件中的data和methods

6.为什么组件中data必须是一个函数

《Vue学习笔记》-组件-创建组件的方式及相关细节

注意：复制代码时，请注意修改vue-2.4.0.js的路径，否则容易出错

1.组件-创建组件的方式1

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

<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <meta http-equiv="X-UA-Compatible" content="ie=edge">
    <title>title</title>
    <script src="./lib/vue-2.4.0.js"></script>
</head>

<body>


    <div id="app">
        <!--通过HTML的标签，使用组件-->
        <!--a.命名方式1：如果vue.componet的组件名称使用驼峰命名法，采用小写+‘-’方式-->
        <my-com1></my-com1>
        <!--b.命名方式2：如果vue.componet的组件名称没有使用驼峰命名法，直接使用组件名称即可-->
        <mycom2></mycom2>

    </div>
    <script>
        //1.1 使用Vue.extend来创建全局的Vue组件
        var com1 = Vue.extend({
                //template就是要展示的内容位置
                template: '<h3>这是使用Vue.extend创建的组件</h3>'
            })
            //1.2 使用Vue.component('组件的名称'，创建的模板对象)
        Vue.component('myCom1', com1) //驼峰命名法
        Vue.component('mycom2', com1) //非驼峰命名法

        //2.1 也可以通过整合component、extend创建组件
        Vue.component('myCom3', Vue.extend({
            template: '<h3>整合方式</h3>'
        }))

        var vm = new Vue({
            el: '#app',
            data: {},
            methods: {}
        })
    </script>


</body>

</html>

2.组件-创建组件的方式2

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

<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <meta http-equiv="X-UA-Compatible" content="ie=edge">
    <title>title</title>
    <script src="./lib/vue-2.4.0.js"></script>
</head>

<body>


    <div id="app">
        <my-com1></my-com1>
    </div>

    <script>
        Vue.component("myCom1", {

            //组件的template属性指向的模板内容，必须有且只有一个根元素
            //所以需要使用多个同级标签时，需要采用<div></div>
            template: '<div><h3>h3</h3><span>span</span></div>'
        })

        var vm = new Vue({
            el: '#app',
            data: {},
            methods: {}
        })
    </script>


</body>

</html>

3.组件-创建组件的方式3

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

<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <meta http-equiv="X-UA-Compatible" content="ie=edge">
    <title>title</title>
    <script src="./lib/vue-2.4.0.js"></script>
</head>

<body>


    <div id="app">
        <my-com1></my-com1>
    </div>
    <!--在 被控制的 #app 外面，使用template元素，定义组件的HTML模板，
        使HTML模板从template分离出来（与第二种方式比较），也方便代码提示-->
    <template id="tem1">
    <div>
        <h1>H1</h1>
        <h2>H2</h2>
    </div>
</template>

    <script>
        Vue.component('myCom1', {
            template: '#tem1' //注意#号，代表ID
        })
        var vm = new Vue({
            el: '#app',
            data: {},
            methods: {}
        })
    </script>


</body>

</html>

4.组件-创建私有组件的方式

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

<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <meta http-equiv="X-UA-Compatible" content="ie=edge">
    <title>title</title>
    <script src="./lib/vue-2.4.0.js"></script>
</head>

<body>


    <div id="app">
        <login1></login1>
        <login2></login2>
    </div>
    <!--在div的控制区域外-->
    <template id="tem2">
        <div>
            <h1>私有的login2-h1</h1>
            <h2>私有的login2-h2</h2>
        </div>
    </template>
    <script>
        var vm = new Vue({
            el: '#app',
            data: {},
            methods: {},
            filters: {}, //过滤器
            directives: {}, //指令
            components: { //定义实例内部私有组件
                login1: {
                    template: '<h1>私有的login1组件</h1>'
                },
                login2: {
                    //将内容分离出来
                    template: '#tem2'

                }

            }
        })
    </script>


</body>

</html>

5.组件-组件中的data和methods

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

<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <meta http-equiv="X-UA-Compatible" content="ie=edge">
    <title>title</title>
    <script src="./lib/vue-2.4.0.js"></script>
</head>

<body>


    <div id="app">
        <mycom1></mycom1>
    </div>

    <script>
        //1.1 组件可以拥有自己的data数据
        //1.2 注意：组件的data与VM实例色data不一样，Vm实例中的data可以作为一个对象，但是组件中的data必须是一个方法
        //1.3 data的方法内部必须返回一个对象才行
        //1.4 组件中的data数据使用方式与Vm实例的一样
        Vue.component('mycom1', {
            template: '<h1>这是全局组件===msg:{{msg}}</h1>',
            data: function() {
                return {
                    msg: '这是组件中data定义的数据'
                }
            },
            methods: {

            }

        })
        var vm = new Vue({
            el: '#app',
            data: {},
            methods: {}
        })
    </script>


</body>

</html>

6.为什么组件中data必须是一个函数

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

<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <meta http-equiv="X-UA-Compatible" content="ie=edge">
    <title>title</title>
    <script src="./lib/vue-2.4.0.js"></script>
</head>

<body>
    <!--为了方便不同地方调用组件，不同的组件调用之间不会受到影响-->

    <div id="app">
        <counter></counter>
        <hr>
        <counter></counter>
        <hr>
        <counter></counter>
    </div>

    <template id="tmp1">
        <!-- 注意HTML标签放在div中 -->
        <div>
                <input type="button" value="+1" v-on:click="increment">
                <h3>{{count}}</h3>
        </div>
    </template>

    <script>
        //定义全局的对象，注意：全局变量是受全局的因素影响的，这也是为什么data必须是一个方法函数
        var dataObj = {
                count: 0
            }
            //定义计时器组件，点击+1按钮，count+1
        Vue.component('counter', {
            template: '#tmp1',
            data: function() {
                //如果此处使用全局的对象，只要其中一个组件的使用发生改变，都会改变组件的其他使用
                // return dataObj
                return {
                    count: 0
                }
            },
            methods: {
                increment() {
                    this.count++
                }
            }
        })
        var vm = new Vue({
            el: '#app',
            data: {},
            methods: {}
        })
    </script>


</body>

</html>