@逆风boy
@逆风boy

web前端之Vue——子组件的详解

子组件的定义和注册

通过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>Documenttitle>
    <script src="vue2.5.16.js">script>
head>

<body>

    <div id="app">
        <account>

        account>
    div>

    <script>

        //定义、注册组件
        Vue.component('account', {
            template: '
账号模块
 
',
            components: {
                'login': {
                    template: '
登录模块
'
                }
            }
        });

        new Vue({
            el: '#app'
        });
    script>
body>

html>

我们发现，既然是定义父亲的子组件，那么，子组件的调用，只能写在父组件的template模板中。

显示效果：

web前端之Vue——子组件的详解_第1张图片

在 Vue 根实例中定义子组件

当然，我们还可以这样做：把整个 Vue 对象当成父亲，这样的话，就可以在 Vue 示例中定义一个子组件。如下：

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>Documenttitle>
    <script src="vue2.5.16.js">script>
head>

<body>

    <div id="app">
        <login> login>
    div>

    <script>

        new Vue({
            el: '#app',
            //在Vue实例中定义子组件
            components: {  // components 是关键字，不能改
                'login': {
                    template: '
登录模块
'
                }
            }
        });
    script>
body>

html>

这样写的话，我们定义的子组件在整个#app区域，都是可以使用的。

上面的代码，还有另外一种写法：（把子组件的模板定义，存放到变量中）【重要】

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>Documenttitle>
    <script src="vue2.5.16.js">script>
head>

<body>

    <div id="app">
        <login> login>
    div>

    <script>

        //通过变量接收定义的子组件
        var myLogin = {
            template: '
登录模块
'   // template 是关键字，不能改
        }

        new Vue({
            el: '#app',
            //在Vue实例中定义子组件
            components: {  // components 是关键字，不能改
                'login': myLogin

            }
        });
    script>
body>

html>

注意，在定义子组件时，关键字components不要写错了。

组件之间的动态切换（暂略）

我们可以利用标签的:is参数来进行组件之间的切换。

父组件向子组件传递数据

我们要记住：父组件通过属性的形式，向子组件传递数据。

引入：

我们先来看这样一段代码：

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>Documenttitle>
head>
<script src="vue2.5.16.js">script>

<body>

    <div id="app">
        
        <counter number="1+2"> counter>
        <counter number="10+20"> counter>
    div>

    <script>
        var myCounter = {
            //【重要】这里是子组件的范围，无法直接获取父组件中的 number
            template: '
我是子组件。{{number}}
'
        }

        var vm = new Vue({
            el: '#app',
            components: {
                'counter': myCounter
            }
        });
    script>

body>

html>

上方代码中，我想把父组件里 number 的数值传递给子组件，直接这样写，是看不到效果的：

web前端之Vue——子组件的详解_第2张图片

1、父组件传值给子组件：

要通过 props 属性将number进行传递给子组件才可以。代码如下：

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>Documenttitle>
head>
<script src="vue2.5.16.js">script>

<body>

    <div id="app">
        
        <counter :number="1+2"> counter>
        <counter :number="10+20"> counter>
    div>

    <script>
        var myCounter = {
            //这里是子组件的范围
            props: ['number'], //通过 props 属性将父亲的 number 数据传递给子组件
            template: '
我是子组件。{{number}}
'
        }

        var vm = new Vue({
            el: '#app',
            components: {
                'counter': myCounter
            }
        });
    script>

body>

html>

在标签中，要注意:number里的冒号。加上冒号，那么引号里的内容就是表达式（期望的结果）；否则，引号的内容只是字符串：

2、子组件获取了父组件的数据后，进行求和操作：

上方代码中，子组件已经获取了父组件的两个number，现在要求：每点击一次子组件，在子组件中将数据加 1。

一般人可能会这样写：（不推荐的写法：子组件直接修改父组件中的数据）

        var myCounter = {
            //这里是子组件的范围
            props: ['number'], //通过 props 属性将父亲的数据传递给子组件
            template: '
我是子组件。{{number}}
',
            methods: {
                addClick: function () {
                    this.number ++;  //这种写法不推荐。不建议直接操作父组件中的数据
                }

            }
        }

上方代码的写法不推荐，因为不建议直接操作父组件中的数据。虽然数据操作成功，但是控制台会报错：

img.png

这样涉及到单向数据流的概念：

  • 父组件可以传递参数给子组件，但是反过来，子组件不要去修改父组件传递过来的参数。因为同一个参数，可能会传递给多个子组件，避免造成修改的冲突。

既然如此，我可以把父组件中的数据，在子组件中创建副本，然后我们去修改这个副本，就不会造成影响了。最终，完整版代码如下：

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>Documenttitle>
head>
<script src="vue2.5.16.js">script>

<body>

    <div id="app">
        
        <counter :number="1+2"> counter>
        <counter :number="10+20"> counter>
    div>

    <script>
        var myCounter = {
            //这里是子组件的范围
            props: ['number'], //通过 props 属性将父亲的数据传递给子组件
            data: function () {
                return {
                    number2: this.number
                }
            },
            template: '
我是子组件。{{number2}}
',

            methods: {
                addClick: function () {
                    this.number2 ++;   //操作和修改number的副本
                }

            }
        }

        var vm = new Vue({
            el: '#app',
            components: {
                'counter': myCounter
            },

        });
    script>

body>

html>

子组件向父组件传值

我们要记住：子组件通过事件触发的形式，向父组件传值。

**案例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>Documenttitle>
    <script src="vue2.5.16.js">script>
head>

<body>

    <div id="app">
        
        <counter v-on:mysend="getData"> counter>
    div>

    <script>

        Vue.component('counter', {
            template: '
发送数据给父组件
',  //当组件被点击时，触发 addClick 方法

            methods: {
                addClick: function () {
                    //第一个参数为键(注意，要小写，不能大写)，第二个参数为值
                    this.$emit('mysend', 'smyhvae'); //通过键`mysend`事件通知外面，将值`smyhvae`传给父组件
                }
            }
        });

        new Vue({
            el: '#app',
            methods: {
                getData: function (input) { //通过括号里的参数，获取子组件传递过来的值
                    console.log(input);   //打印结果：smyhvae
                }
            }
        });
    script>
body>

html>

案例2：获取子组件的DOM对象

题目：给两个相同的子组件定义计数器，每点击一次，数值加1。然后在父组件中求和。

步骤（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>Documenttitle>
    <script src="vue2.5.16.js">script>
head>

<body>

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

    <script>

        Vue.component('counter', {
            template: '
当前计数：{{number}}
',  //当组件被点击时，调用 addClick 方法

            data: function () {
                return {
                    number: 0 //给组件定义一个数据：number
                }
            },
            methods: {
                addClick: function () {
                    this.number++;   //定义方法：每点击一次，number 的数值加 1
                }
            }
        });

        new Vue({
            el: '#app'
        });
    script>
body>

html>

步骤（2）：两个子组件的数值加 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>Documenttitle>
    <script src="vue2.5.16.js">script>
head>

<body>

    <div id="app">
        
        <counter @change="myMethod"> counter>
        <counter @change="myMethod"> counter>
    div>

    <script>

        Vue.component('counter', {
            template: '
当前计数：{{number}}
',  //当组件被点击时，

            data: function () {
                return {
                    number: 0 //给组件定义一个数据：number
                }
            },
            methods: {
                addClick: function () {
                    this.number++;   //定义方法：每点击一次，number 的数值加 1
                    this.$emit('change'); //通过这一行的`change`，通知外面，内部的 addClick 方法已经执行了
                }
            }
        });

        new Vue({
            el: '#app',
            methods: {
                myMethod: function () {
                    console.log('触发父组件');
                }
            }
        });
    script>
body>

html>

上方代码中，通过关键字emit通知父组件，子组件里的 addClick 方法被执行了。父组件得知后，执行myMethod()方法（这个方法是在Vue实例中定义的，很好理解）

步骤（3）：在父组件中求和

既然父组件已经得知子组件的 addClick 事件，那我们直接在父组件的myMethod()里定义求和的方法即可。

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>Documenttitle>
    <script src="vue2.5.16.js">script>
head>

<body>

    <div id="app">
        
        <counter ref="one" @change="myMethod"> counter>
        <counter ref="two" @change="myMethod"> counter>
        <div>{{totalData}}div>
    div>

    <script>

        Vue.component('counter', {
            template: '
当前计数：{{number}}
',  //当组件被点击时，触发 addClick方法

            data: function () {
                return {
                    number: 0 //给组件定义一个数据：number
                }
            },
            methods: {
                addClick: function () {
                    this.number++;   //定义方法：每点击一次，number 的数值加 1
                    this.$emit('change'); //通过这一行自定义的`change`，通知外面，内部的 addClick 方法已经执行了
                }
            }
        });

        new Vue({
            el: '#app',
            data: {
                totalData: 0
            },
            methods: {
                myMethod: function () {
                    console.log('触发父组件');
                    //通过`$refs`获取子组件中各自的number数值
                    var a1 = this.$refs.one.number;
                    var a2 = this.$refs.two.number;
                    //求和，存放在父组件的 totalData 中
                    this.totalData = a1 + a2;

                    console.log();
                }
            }
        });
    script>
body>

html>

代码的关键：

  • 在标签中，通过 ref = "xxx"属性，给各个组件起一个别名，代表组件的引用

  • 在父函数myMethod()中，通过this.$refs.xxx获取组件的引用。我们看一下最后两行代码在控制台的输出便知：（组件里有 number 属性）

web前端之Vue——子组件的详解_第3张图片

二、什么是组件

组件： 组件的出现，就是为了拆分Vue实例的代码量的，能够让我们以不同的组件，来划分不同的功能模块，将来我们需要什么样的功能，就可以去调用对应的组件即可。

模块化和组件化的区别

  • 模块化：是从代码逻辑的角度进行划分的；方便代码分层开发，保证每个功能模块的职能单一

  • 组件化：是从UI界面的角度进行划分的；前端的组件化，方便UI组件的重用

全局组件的定义和注册

组件Component是 Vue.js 最强大的功能之一。组件可以扩展 HTML 元素，封装可重用的代码。

全局组件的定义和注册有三种方式，我们接下来讲一讲。

写法一

写法一：使用Vue.extend方法定义组件，使用 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>Documenttitle>
    <script src="vue2.5.16.js">script>
head>

<body>
    <div id="app">
        
        <account> account>
    div>

    <script>
        //第一步：使用 Vue.extend 定义组件
        var myAccount = Vue.extend({
            template: '
登录页面
 
注册页面
' // 通过 template 属性，指定了组件要展示的HTML结构。template 是 Vue 中的关键字，不能改。
        });
        //第二步：使用 Vue.component 注册组件
        // Vue.component('组件的名称', 创建出来的组件模板对象)
        Vue.component('account', myAccount); //第一个参数是组件的名称（标签名），第二个参数是模板对象

        new Vue({
            el: '#app'
        });
    script>
body>

html>

上方代码中，在注册组件时，第一个参数是标签名，第二个参数是组件的定义。

运行结果如下：

web前端之Vue——子组件的详解_第4张图片

代码截图如下：

web前端之Vue——子组件的详解_第5张图片

上图中，注意两点：

注意1、红框部分，要保证二者的名字是一致的。如果在注册时，组件的名称是驼峰命名，比如：

Vue.component('myComponent', myAccount); //第一个参数是组件的名称（标签名），第二个参数是模板对象

那么，在标签中使用组件时，需要把大写的驼峰改为小写的字母，同时两个单词之间使用-进行连接：

<my-component> my-component>

所以，为了避免名字不一致的问题，我们注册组件时，组件的名称可以直接写成my-component。比如：（避免驼峰不一致的建议写法）

    Vue.component('my-component', myAccount);

注意2、绿框部分，一定要用一个大的根元素（例如

）包裹起来。如果我写成下面这样，就没有预期的效果：

            template: '
登录页面
 
注册页面
'

结果如下：（并非预期的效果）

web前端之Vue——子组件的详解_第6张图片

写法二

写法二：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>Documenttitle>
    <script src="vue2.5.16.js">script>
head>

<body>
    <div id="app">
        <account> account>
    div>

    <script>

        //定义、注册组件：第一个参数是组件的名称（标签名），第二个参数是组件的定义
        Vue.component('account', {
            template: '
登录页面
 
注册页面
'   // template 是 Vue 中的关键字，不能改。
        });

        new Vue({
            el: '#app'
        });
    script>
body>

html>

代码截图如下：

web前端之Vue——子组件的详解_第7张图片

上图中，同样注意两点：

1、红框部分，要保证二者的名字是一致的。

2、绿框部分，一定要用一个大的根元素（例如

）包裹起来。如果我写成下面这样，就没有预期的效果：

            template: '
登录页面
 
注册页面
'

结果如下：（并非预期的效果）

web前端之Vue——子组件的详解_第8张图片

写法三【荐】

上面的写法一、写法二并不是很智能，因为在定义模板的时候，没有智能提示和高亮，容易出错。我们不妨来看看写法三。

写法三：将组件内容定义到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>Documenttitle>
    <script src="vue2.5.16.js">script>
head>

<body>
    
    <template id="myAccount">
        <div>
            <h2>登录页面h2>
            <h3>注册页面h3>
        div>
    template>

    <div id="app">
        
        <account> account>
    div>

    <script>

        //定义、注册组件
        Vue.component('account', {
            template: '#myAccount'    // template 是 Vue 中的关键字，不能改。
        });

        new Vue({
            el: '#app'
        });
    script>
body>

html>

代码截图如下：

web前端之Vue——子组件的详解_第9张图片

写法三其实和方法二差不多，无非是把绿框部分的内容，单独放在了