vue组件

最新推荐文章于 2024-05-07 01:25:59 发布

陈小同学

最新推荐文章于 2024-05-07 01:25:59 发布

阅读量64

点赞数

文章标签： vue.js javascript html

本文链接：https://blog.csdn.net/xiaoChenPengYou/article/details/120825091

版权

本文详细介绍了Vue.js中全局组件和局部组件的三种定义及注册方式，包括Vue.extend、Vue.component以及template标签的使用。强调了在定义组件时模板只能有一个根节点和在注册全局组件时驼峰命名需转换为小写连字符格式。同时，解释了为何在组件中data必须是一个函数，以避免数据混乱。最后，展示了如何在组件内添加并使用data属性。

摘要由CSDN通过智能技术生成

vue组件

组件也分问两种：

全局组件：通过Vue.component形式定义的是全局组件
局部组件：子啊Vue.component中使用components属性的是局部组件

全局组件

全局组件有三种写法：

第一种：使用Vue.extend方法定义组件，使用 Vue.component方法注册组件。

注意点：extend对象里面只能有一个根节点

<!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>Document</title>
    <script src="vue2.5.16.js"></script>
</head>

<body>
    <div id="app">
        <!-- 使用组件，直接把注册时定义好的名称作为标签名以HTML标签的形式写 -->
        <account></account>
    </div>
    <script>
        //第一步：使用 Vue.extend 定义组件模板内容
        var myAccount = Vue.extend({
            template: '<div><h2>我是全局组件</h2>></div>' 
            // 通过 template 属性，指定了组件要展示的HTML结构。template 是 Vue 中的关键字，不能改。
            // 这里需要注意一点：就是模板里只能有一个根节点，多个根节点的情况会出错。
        });
        //第二步：使用 Vue.component 注册组件
        // Vue.component('组件的名称', 创建出来的组件模板对象)
        Vue.component('account', myAccount); //第一个参数是组件的名称（标签名），第二个参数是模板对象
        var vm = new Vue({
            el: '#app',
            data: {},
            methods: {}
        })

    </script>
</body>

</html>

注意点：

如果在注册时，组件的名称是驼峰命名，例：myAccount。那么，在标签中使用组件时，需要把大写的驼峰改为小写的字母，同时两个单词之间使用-进行连接： <my-account></my-account>。

方法二：Vue.component方法定义、注册组件，两者合一。

<!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>Document</title>
    <script src="vue2.5.16.js"></script>
</head>

<body>
    <div id="app">
        <account></account>
    </div>
    <script>
        //定义、注册组件：第一个参数是组件的名称（标签名），第二个参数是组件的定义
        Vue.component('account', {
            template: '<div><h2>我是全局组件</h2></div>'  
        });
        var vm = new Vue({
            el: '#app',
            data: {},
            methods: {}
        })

    </script>
</body>

</html>

其实也就是第一种方法的简写形式。需要注意的也是和第一种一样。

第三种方法：将组件内容定义到template标签中。

<!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>Document</title>
    <script src="vue2.5.16.js"></script>
</head>

<body>
    <div id="app">
        <account></account>
    </div>
        <!-- 定义模板 -->
    <template id="myAccount">
        <div>
            <h2>我是全局组件</h2>
        </div>
    </template>
    <script>
         //定义、注册组件
        Vue.component('account', {
	        // 后面跟着的是组件模板的ID
            template: '#myAccount'    
        });

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

    </script>
</body>

</html>

相比前两个，更加推荐的是使用最后一种方法。写法一、写法二并不是很智能，因为在定义模板的时候，没有智能提示和高亮，容易出错。

局部组件

在vue实例中定义的组件就叫局部组件，也叫私有组件，这样定义，那就只有当前的实例才可以使用这个组件。

使用components属性定义私有组件：

<!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>Document</title>
    <script src="vue2.5.16.js"></script>
</head>

<body>
    <div id="app">
        <account></account>
    </div>
    <script>
        var vm = new Vue({
            el: '#app',
            data: {},
            methods: {},
            compontnts: {
                accont: {
                    template: '<div><h2>我是私有组件</h2></div>'
                }
            }
        })

    </script>
</body>

</html>

当然私有组件的方法也是跟全局组件的方法是一样的，模板也可以使用template标签定义。

注册使用驼峰命名时，在标签中也是需要转换为小写字母再用-来分割两个单词。

组件使用data

在组件中使用data是和在实例中有一些区别的。

data使用方法

必须是一个函数
data:function(){return {数据}}或者data(){return {数据}}
为什么一定要是一个函数：组件中的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>Document</title>
    <script src="vue2.5.16.js"></script>
</head>

<body>
    <div id="app">
        <!-- 两次调用 -->
        <account></account>
        <account></account>
    </div>
    <script>
        var vm = new Vue({
            el: '#app',
            data: {},
            methods: {},
            compontnts: {
                accont: {
                    template: '<div><h2>{{name}}</h2></div>'，
                    data: function(){
                		return {
                			name: "私有组件的数据"
                        }
                    }
                }
            }
        })

    </script>
</body>

</html>

注意，在为组件添加数据时，data不再是对象了，而是function，而且要通过 return的形式进行返回；否则，页面上是无法看到效果的。

仅供参考。

陈小同学

关注

0
点赞
踩
0

收藏

觉得还不错? 一键收藏
0
评论
vue组件

vue组件组件也分问两种：全局组件：通过Vue.component形式定义的是全局组件局部组件：子啊Vue.component中使用components属性的是局部组件全局组件全局组件有三种写法：第一种：使用Vue.extend方法定义组件，使用 Vue.component方法注册组件。注意点：extend对象里面只能有一个根节点<!DOCTYPE html><html lang="en"><head> <meta charset=
复制链接

扫一扫