【Vue】组件的创建以及 data & methods 属性的使用

最新推荐文章于 2024-06-20 13:52:07 发布

心。晴

最新推荐文章于 2024-06-20 13:52:07 发布

阅读量1.1k

点赞数 2

文章标签： vue 组件

本文链接：https://blog.csdn.net/jingjing217/article/details/108281514

版权

本文我们来介绍下Vue中的组件，组件是可复用的 Vue 实例，且带有一个名字。

组件的创建

extend方式

首先通过 Vue.extend 方法来定义一个全局组件。template 就是组件将来要展示的HTML内容。然后通过 Vue.component 来添加我们的组件。（注意：组件的名称如果采用的是 驼峰命名法 ，那么在使用组件的时候，大写必须改为小写，而且要用 “-”连接。）

<div id="app">
    <my-com></my-com>
</div>
<script>
    // 使用 Vue.extend 创建全局的Vue组件
    var com1 = Vue.extend({
        template: "<h3>这是个Vue组件</h3>"
    })
    // 使用 Vue.component('组件名称', 创建出来的组件对象) 添加组件
    Vue.component("myCom",com1);
    var vm = new Vue({
        el: "#app",
        data: {
        },
    })
</script>

在这里插入图片描述

简写方式

在前面的基础上，我们可以简写 Vue.extend() 创建全局Vue组件的操作。

<div id="app">
    <my-com></my-com>
</div>
<script>
    Vue.component("myCom",{
        template: "<div><h3>这是个Vue组件</h3><p>Vue组件</p></div>"
    })
    var vm = new Vue({
        el: "#app",
        data: {
        },
    })
</script>

在这里插入图片描述

注意： 创建的组件中HTML元素只能有一个root标签，如果有多个时会报错，建议在所有元素最外层用< div>标签包起来。

template标签

在上面的例子中我们的组件元素都是直接在 template 中直接通过字符串来声明的，这种方式书写时没有智能提示，容易出现错误，这时我们可以通过<template> 标签来定义组件HTML元素，然后通过id来使用。

<div id="app">
    <my-com></my-com>
</div>
<template id='com'>
    <h3>这是个Vue组件</h3>
</template>
<script>
    Vue.component("myCom",{
        template: "#com"
    })
    var vm = new Vue({
        el: "#app",
        data: {
        },
    })
</script>

私有组件

上面定义的都是全局的组件，接下来我们看看如何在单个Vue实例中定义私有的组件。

<div id="app">
    <my-com></my-com>
</div>
<div id="app1">
    <my-com></my-com>
</div>
<script>
    var vm = new Vue({
        el: "#app",
        data: {
        },
        //定义私有组件
        components:{
            'myCom':{
                template: "<h3>这是一个私有组件</h3>"
            }
        }
    })
</script>

在这里插入图片描述

组件中的data和methods属性

组件中的这两个属性和Vue实例中的 data 和 methods 属性很类似，使用方式也是一样的。需要注意的是，组件中定义的 data 必须是一个函数，并且返回一个对象。

<div id="app">
    <my-com></my-com>
</div>
<script>
    Vue.component("myCom",{
        template:`
        <div>
            <button @click='show'>调用方法</button>
            <h3>这是个Vue组件,{{id}}:{{name}}</h3>
        </div>
        `,
        data:function(){
            return {id:1,name:'my-com'}
        },
        methods:{
            show(){
                console.log('组件中的show方法被调用')
            }
        }
    })
    var vm = new Vue({
        el: "#app",
        data: {
        },
    })
</script>

在这里插入图片描述

以上就是 data 和 methods 属性的使用，接下来我们讨论一下 data 属性为什么必须要返回一个对象呢？

我们要清楚组件和Vue实例的区别：Vue实例是在页面加载的时候被实例化的，一个页面就一个；而组件是可以复用的，也就是在一个页面中同一个组件可以有多个实例。如下案例：

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>Document</title>
    <script src="https://cdn.bootcdn.net/ajax/libs/vue/2.6.12/vue.min.js"></script>
</head>
<body>
    <div id="app">
        <!--复用3个Vue组件-->
        <counter></counter>
        <counter></counter>
        <counter></counter>
    </div>
    <template id="tmpl">
        <div>
            <button @click="increment">加1</button>
            <h3>{{count}}</h3>
        </div>
    </template>
    <script>
        // 声明的全局对象
        var dataObj = { count: 0 }
        // 这是一个计数器的组件, 点击按钮,count值+1
        Vue.component('counter', {
            template: '#tmpl',
            data: function () {
                return dataObj
            },
            methods: {
                increment() {
                    this.count++
                }
            }
        })
        var vm = new Vue({
            el: '#app',
            data: {},
            methods: {}
        });
      </script>
    </body>
</body>
</html>

在这里插入图片描述
通过演示我们可以看到，三个组件同时进行了累加，而我们需要的是分别累加互不干扰。

在data属性中返回一个对象，组件每次复用的时候都给返回一个新的实例对象，让组件实例之间数据独立。
在这里插入图片描述

心。晴

关注

2
点赞
踩
0

收藏

觉得还不错? 一键收藏
0
评论
【Vue】组件的创建以及 data & methods 属性的使用

本文我们来介绍下Vue中的组件，组件是可复用的 Vue 实例，且带有一个名字。组件的创建extend方式首先通过 Vue.extend 方法来定义一个全局组件。template 就是组件将来要展示的HTML内容。然后通过 Vue.component 来添加我们的组件。（注意：组件的名称如果采用的是驼峰命名法，那么在使用组件的时候，大写必须改为小写，而且要用 “-”连接。）<div id="app"> <my-com></my-com></div
复制链接

扫一扫