教女朋友学习 vue中的组件

写在前面: 我是「扬帆向海」,这个昵称来源于我的名字以及女朋友的名字。我热爱技术、热爱开源、热爱编程。技术是开源的、知识是共享的

这博客是对自己学习的一点点总结及记录,如果您对 Java算法 感兴趣,可以关注我的动态,我们一起学习。

用知识改变命运,让我们的家人过上更好的生活

此时是凌晨两点,我坐在电脑桌前写Bug。女朋友睡眼朦胧的跟我说 “扬帆,还不睡觉吗?你以前给我讲的vue中的 过滤器指令生命周期,我现在都学会了。你可以给我讲讲组件的知识吗?”

我: “可以,正好明天休息”

一、什么是组件

组件(Component)是 Vue.js 最强大的功能之一。

组件可以扩展 HTML 元素,封装可重用的代码。

组件系统让我们可以用独立可复用的小组件来构建大型应用,几乎任意类型的应用的界面都可以抽象为一个组件树:

在这里插入图片描述

二、组件的声明及使用

1. 全局组件

注册一个全局组件语法格式如下:

Vue.component(tagName, options)

tagName 为组件名,options 为配置选项。注册后,我们可以使用以下方式来调用组件:

<tagName></tagName>

代码示例

<!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>
    <script src="js/vue.js"></script>
</head>

<body>
    <div id="app">
        <!-- 使用组件 -->
        <my-component></my-component>
    </div>

    <script>
        // 注册组件
        Vue.component('myComponent', {
            template: ' <h1>Hello! 我是全局注册组件!</h1>'
        })
        // 创建 Vue 实例
        var vm = new Vue({
            el: '#app',
            data: {},
            methods: {}
        });
    </script>
</body>

</html>

测试结果
在这里插入图片描述

全局注册往往是不够理想的。比如,如果你使用一个像 webpack 这样的构建系统,全局注册所有的组件意味着即便你已经不再使用一个组件了,它仍然会被包含在你最终的构建结果中。这造成了用户下载的 JavaScript 的无谓的增加。

有时候由于不需要全局注册每个组件。可以让组件只能用在其它组件内,用实例选项 components 注册。这就有了局部注册组件!

2. 局部注册

局部组件只能在当前注册它的vue实例中使用

代码示例

<body>
    <div id="app">
        <my-component></my-component>
    </div>
    <template id="templ">
        <h1>Hello! 我是局部注册组件</h1>
    </template>

    <script>
        // 创建 Vue 实例
        var vm = new Vue({
            el: '#app',
            data: {},
            components: { // 定义实例内部的私有属性
                myComponent: {
                    template: '#templ'
                }
            }
        })
    </script>
</body>

测试结果
在这里插入图片描述

3. 组件使用注意事项

① 组件名称如果是使用驼峰法命名,使用组件的时候要将大写字母改为小写,并且在前面加上 - ;

在这里插入图片描述

② 组件中的tamplate属性必须有一个唯一的根元素,否则会报错;
在这里插入图片描述

这个错误的意思是: 组件模板应该只包含一个根元素。应该按如下的方法来写:

在这里插入图片描述

三、组件的复用

有时候由于实际需要,有时候需要将组件进行任意次数的复用

代码示例

<body>
    <div id="app">
        <button-counter></button-counter>
        <button-counter></button-counter>
        <button-counter></button-counter>
    </div>
    <template id="templ">
        <button class="btn" @click="toClick">点击了{{count}}次</button>
    </template>
    <script>
        var dataObj = {
            count: 0
        }
        Vue.component('button-counter', {
            template: '#templ',
            data: function () {
            	// data 选项是一个对象
                return dataObj
            },
            methods: {
                toClick: function () {
                    this.count += 1;
                }
            }
        })
        var vm = new Vue({
            el: '#app',
            data: {}
        });
    </script>
</body>

测试结果
在这里插入图片描述

1. 遇到的问题

从测试结果可以看出,当点击一个按钮的时候,其它实例的值也会跟着改变。

原因是:data 选项是一个对象,会影响到其它实例。

在这里插入图片描述

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>
    <script src="js/vue.js"></script>
    <style>
        .btn {
            text-align: center;
            color:white;
            background-color: green;
            font-size: 15px;
            margin-top: 10px;
        }
    </style>
</head>

<body>
    <div id="app">
        <button-counter></button-counter>
        <button-counter></button-counter>
        <button-counter></button-counter>
    </div>
    <template id="templ">
        <button class="btn" @click="toClick">点击了{{count}}次</button>
    </template>
    <script>
        Vue.component('button-counter', {
            template: '#templ',
            data: function () {
            	// data 选项是一个函数,组件不相互影响
                return {
                    count: 0
                }
            },
            methods: {
                toClick: function () {
                    this.count += 1;
                }
            }
        })
        var vm = new Vue({
            el: '#app',
            data: {}
        });
    </script>
</body>

</html>

测试结果
在这里插入图片描述

上面例子中,可以看到 button-counter 组件中的 data不是一个对象,而是一个函数。注意当点击按钮时,每个组件都会各自独立维护它的 count。因为每用一次组件,就会有一个它的新实例被创建。

这样做的好处:就是每个实例可以维护一份被返回对象的独立的拷贝,如果 data 是一个对象则会影响到其它实例。

在这里插入图片描述

注意

组件的 data 和实例的 data 不一样,实例中的 data 可以是一个对象,但是组件中的 data 必须是一个函数。

今天就到这儿吧!下一次我再介绍 Vue父子组件传值 的问题。


由于水平有限,本博客难免有不足,恳请各位大佬不吝赐教!

相关推荐
©️2020 CSDN 皮肤主题: 代码科技 设计师:Amelia_0503 返回首页