正文

Vue 组件系统

admin
admin V管理员 /0 评论 /266 阅读
0110
此篇文章发布距今已超过683天，您需要注意文章的内容或图片是否可用！

vue.js既然是框架，那就不能只是简单的完成数据模板引擎的任务，它还提供了页面布局的功能。本文详细介绍使用vue.js进行页面布局的强大工具，vue.js组件系统。

每一个新技术的诞生，都是为了解决特定的问题。组件的出现就是为了解决页面布局等等一系列问题。vue中的组件分为两种，全局组件和局部组件。

通过Vue.component()创建一个全局组件之后，我们可以在一个通过 new Vue 创建的 Vue 根实例中，把这个组件作为自定义元素来使用。

<!DOCTYPE html>
<html lang="en">
<head>
  <meta charset="UTF-8">
  <title>Title</title>
  <script src="../statics/vue.min.js"></script>
</head>
<body>
  <div >
    <!--第二步，使用-->
    <global_component></global_component>
  </div>
  <script>
    // 第一步，注册
    Vue.component("global_component", {
      template: `
        <div>
            <h2>Hello Vue</h2>
        </div>
      `
    });
    new Vue({
      el: "#app",
    });
  </script>
</body>
</html>

组件的参数

因为组件是可复用的 Vue 实例,所以它们与 new Vue 接收相同的选项，例如 data、computed、watch、methods 以及生命周期钩子等。仅有的例外是像 el这样根实例特有的选项。

<!DOCTYPE html>
<html lang="en">
<head>
  <meta charset="UTF-8">
  <title>Title</title>
  <script src="../statics/vue.min.js"></script>
</head>
<body>
  <div >
    <!--第二步，使用-->
    <global_component></global_component>
  </div>
  <script>
    // 第一步，注册
    Vue.component("global_component", {
      data: function () {
        return {
          count: 0
        }
      },
      template: `<button v-on:click="count++">You clicked me {{ count }} times.</button>`
    });
    new Vue({
      el: "#app",
    });
  </script>
</body>
</html>

组件的复用

每个实例维护自己的一份独立的数据。

<!DOCTYPE html>
<html lang="en">
<head>
  <meta charset="UTF-8">
  <title>Title</title>
  <script src="../statics/vue.min.js"></script>
</head>
<body>
  <div >
    <!--第二步，使用-->
    <global_component></global_component>
    <global_component></global_component>
    <global_component></global_component>
  </div>
  <script>
    // 第一步，注册
    Vue.component("global_component", {
      data: function () {
        return {
          count: 0
        }
      },
      template: `<button v-on:click="count++">You clicked me {{ count }} times.</button>`
    });
    new Vue({
      el: "#app",
    });
  </script>
</body>
</html>

注意当点击按钮时，每个组件都会各自独立维护它的 count。因为你每用一次组件，就会有一个它的新实例被创建。

Data必须是一个函数

data必须是一个函数，因此每个实例可以维护一份被返回对象的独立的拷贝, 也可以写成如下形式

<!DOCTYPE html>
<html lang="en">
<head>
  <meta charset="UTF-8">
  <title>Title</title>
  <script src="../statics/vue.min.js"></script>
</head>
<body>
  <div >
    <!--第二步，使用-->
    <global_component></global_component>
    <global_component></global_component>
    <global_component></global_component>
  </div>
  <script>
    // 第一步，注册
    Vue.component("global_component", {
      data(){
        return {
          count: 0
        }
      },
      template: `<button v-on:click="count++">You clicked me {{ count }} times.</button>`
    });
    new Vue({
      el: "#app",
    });
  </script>
</body>
</html>


二、局部组件的注册

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

全局组件始终是存在的，除非程序结束，如果组件越来越大，那么程序所占用的空间和消耗的性能就会更大。


局部组件的第一种使用方式

<!DOCTYPE html>
<html lang="en">
<head>
  <meta charset="UTF-8">
  <title>Title</title>
  <script src="../statics/vue.min.js"></script>
</head>
<body>
  <div >
    <!--最后在根元素当中使用它-->
    <!--第一种使用方式，会把当前div渲染进DOM-->
    <my-header></my-header>
  </div>
  <script>
    // 定义一个局部组件，其实就是一个变量，它是一个object类型
    // 属性与全局组件是一样的
    let Header = {
      template: `
        <button @click="count++">{{ count }}</button>
      `,
      data() {
        return {
          count: 0
        }
      }
    };
    new Vue({
      el: "#component-demo",
      // 第二部，需要在根实例当中使用它
      components: {
        'my-header': Header
      }
    });
  </script>
</body>
</html>

局部组件的第二种使用方式

<!DOCTYPE html>
<html lang="en">
<head>
  <meta charset="UTF-8">
  <title>Title</title>
  <script src="../statics/vue.min.js"></script>
</head>
<body>
  <div >
  </div>
  <script>
    // 定义一个局部组件，其实就是一个变量，它是一个object类型
    // 属性与全局组件是一样的
    let Header = {
      template: `
        <button @click="count++">{{ count }}</button>
      `,
      data() {
        return {
          count: 0
        }
      }
    };
    new Vue({
      el: "#component-demo",
      // 第二种使用方式，不会将div渲染进DOM，以template为根元素
      template: `<my-header></my-header>`,
      // 第二步，需要在根实例当中使用它
      components: {
        'my-header': Header
      }
    });
  </script>
</body>
</html>

对于 components 对象中的每个属性来说，其属性名就是自定义元素的名字，其属性值就是这个组件的选项对象。

在局部组件中使用子组件

<!DOCTYPE html>
<html lang="en">
<head>
  <meta charset="UTF-8">
  <title>Title</title>
  <script src="../statics/vue.min.js"></script>
  <style>
    body {
      margin: 0;
    }
    .box {
      width: 100%;
      height: 50px;
      background-color: #2aabd2;
    }
  </style>
</head>
<body>
  <div >
  </div>
  <script>
    // 定义一个局部组件，其实就是一个变量，它是一个object类型
    // 这个对象的属性与全局组件是一样的(除el属性外)
    let Fcontent = {
      template: `
        <div>
          <span>这是头条</span>
        </div>
      `
    };
    let Header = {
      template: `
        <div v-bind:class='{box: isBox}'>
          <button @click="count++">{{ count }}</button>
          <first-content></first-content>
        </div>
      `,
      data() {
        return {
          count: 0,
          isBox: true
        }
      },
      components: {
        'first-content': Fcontent
      }
    };
    new Vue({
      el: "#component-demo",
      // 第二种使用方式，不会将div渲染进DOM，以template为根元素
      template: `<my-header></my-header>`,
      // 第二步，需要在根实例当中使用它
      components: {
        'my-header': Header
      }
    });
  </script>
</body>
</html>


三、父子组件的通信

<!DOCTYPE html>
<html lang="en">
<head>
  <meta charset="UTF-8">
  <title>Title</title>
  <script src="../statics/vue.min.js"></script>
  <style>
    body {
      margin: 0;
    }
    .box {
      width: 100%;
      height: 50px;
      background-color: #2aabd2;
    }
  </style>
</head>
<body>
  <div >
  </div>
  <script>
    // 定义一个局部组件，其实就是一个变量，它是一个object类型
    // 属性与全局组件是一样的
    let Fcontent = {
      template: `
        <div>
          <span>这是头条</span>
          {{ fdata }}
        </div>
      `,
      props: ['fdata']
    };
    let Header = {
      template: `
        <div v-bind:class='{box: isBox}'>
          <button @click="count++">{{ count }}</button>
          <first-content :fdata="fathData"></first-content>
        </div>
      `,
      data() {
        return {
          count: 0,
          isBox: true,
          fathData: "我是你爸爸~~~"
        }
      },
      components: {
        'first-content': Fcontent
      }
    };
    new Vue({
      el: "#component-demo",
      // 第二种使用方式，不会将div渲染进DOM，以template为根元素
      template: `<my-header></my-header>`,
      // 第二步，需要在根实例当中使用它
      components: {
        'my-header': Header
      }
    });
  </script>
</body>
</html>


四、子父之间的通信

父组件在mounted的时候，监听一个自定义事件。

给子组件绑定一个click事件之后，通过内建的方法$emit在父组件上触发一个事件，这个事件就是父组件监听的自定义事件。

<!DOCTYPE html>
<html lang="en">
<head>
  <meta charset="UTF-8">
  <title>Title</title>
  <script src="../statics/vue.min.js"></script>
</head>
<body>
  <div >
  </div>
  <script>
    let myFooter = {
      template: `
            <div>
              <h1>我是儿子</h1>
              <button v-on:click="changeFatherSize">点击修改爸爸的字体</button>
            </div>
          `,
      methods: {
        changeFatherSize: function () {
          this.$emit('change-font', 1);
        }
      },
    };
    let myHeader = {
      template: `
            <div>
              <my-footer v-on:change-font="changeSize"></my-footer>
              <span :style="{ fontSize: fontSize + 'px'}">我是爸爸</span>
            </div>
        `,
      data(){
        return {
          fontSize: 26,
        }
      },
      methods: {
        changeSize: function (value) {
          console.log(value);
          this.fontSize += value;
        }
      },
      components: {
        'my-footer': myFooter
      }
    };
    let App = {
      template: `
        <div>
          <my-header></my-header>
        </div>
      `,
      components: {
        'my-header': myHeader,
      },
    };
    new Vue({
      el: "#app",
      template: `<App></App>`,
      components: {
        App
      }
    })
  </script>
</body>
</html>


五、平行组件之间的通信

平行组件之间可以通过一个中间Vue实例来进行通信。

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>Title</title>
    <script src="../statics/vue.min.js"></script>
</head>
<body>
    <div >
            <com-main></com-main>
    </div>
    <script>
        let bus = new Vue();
        let dogfa = {
            template: `
                <div>
                    <button @click="dogfaClick">点击向djb道歉</button>
                </div>
            `,
            methods: {
                dogfaClick: function () {
                    bus.$emit("dogfa_apo", "原谅我吧，请你大保健~~~");
                }
            },
        };
        let djb = {
            template: `
                <div v-show="isShow">原谅你了~~~</div>
            `,
            mounted () {
                bus.$on("dogfa_apo", (dogfasay)=> {
                    if ( dogfasay ) {
                        console.log("原谅你了~~~");
                    }
                });
            },
            data () {
                return {
                    isShow: false
                };
            }
        };
        let App = {
            template: `
                <div >
                    <dogfa></dogfa>
                    <djb></djb>
                </div>
            `,
            components: {
                dogfa,
                djb
            }
        };
        new Vue({
            el: "#app",
            template: '<App></App>',
            components: {
                App
            },
        })
    </script>
</body>
</html>


六、混入

混入可以提高代码的重用性

<!DOCTYPE html>
<html lang="en">
<head>
  <meta charset="UTF-8">
  <title>Title</title>
  <script src="../statics/vue.min.js"></script>
</head>
<body>
  <div >
    <!--第二步，使用-->
    <global_component></global_component>
  </div>
  <script>
    // 第一步，注册
    Vue.component("global_component", {
      data: function () {
        return {
          count: 0
        }
      },
      template: `<button v-on:click="count++">You clicked me {{ count }} times.</button>`
    });
    new Vue({
      el: "#app",
    });
  </script>
</body>
</html>
0


七、插槽

有时候我们需要向组件传递一些数据，这时候可以使用插槽

<!DOCTYPE html>
<html lang="en">
<head>
  <meta charset="UTF-8">
  <title>Title</title>
  <script src="../statics/vue.min.js"></script>
</head>
<body>
  <div >
    <!--第二步，使用-->
    <global_component></global_component>
  </div>
  <script>
    // 第一步，注册
    Vue.component("global_component", {
      data: function () {
        return {
          count: 0
        }
      },
      template: `<button v-on:click="count++">You clicked me {{ count }} times.</button>`
    });
    new Vue({
      el: "#app",
    });
  </script>
</body>
</html>
1


八、具名插槽

操作使用了组件的复用，如果我们在同一个组件内写入不同的页面呢？此时，我们需要多个插槽，并且给不同的内容命名。

<!DOCTYPE html>
<html lang="en">
<head>
  <meta charset="UTF-8">
  <title>Title</title>
  <script src="../statics/vue.min.js"></script>
</head>
<body>
  <div >
    <!--第二步，使用-->
    <global_component></global_component>
  </div>
  <script>
    // 第一步，注册
    Vue.component("global_component", {
      data: function () {
        return {
          count: 0
        }
      },
      template: `<button v-on:click="count++">You clicked me {{ count }} times.</button>`
    });
    new Vue({
      el: "#app",
    });
  </script>
</body>
</html>
2

我们还是可以保留一个未命名插槽，这个插槽是默认插槽，也就是说它会作为所有未匹配到插槽的内容的统一出口。


九、在组件上使用v-model

自定义事件也可以用于创建支持 v-model 的自定义输入组件。记住：

<!DOCTYPE html>
<html lang="en">
<head>
  <meta charset="UTF-8">
  <title>Title</title>
  <script src="../statics/vue.min.js"></script>
</head>
<body>
  <div >
    <!--第二步，使用-->
    <global_component></global_component>
  </div>
  <script>
    // 第一步，注册
    Vue.component("global_component", {
      data: function () {
        return {
          count: 0
        }
      },
      template: `<button v-on:click="count++">You clicked me {{ count }} times.</button>`
    });
    new Vue({
      el: "#app",
    });
  </script>
</body>
</html>
3

等价于：

<!DOCTYPE html>
<html lang="en">
<head>
  <meta charset="UTF-8">
  <title>Title</title>
  <script src="../statics/vue.min.js"></script>
</head>
<body>
  <div >
    <!--第二步，使用-->
    <global_component></global_component>
  </div>
  <script>
    // 第一步，注册
    Vue.component("global_component", {
      data: function () {
        return {
          count: 0
        }
      },
      template: `<button v-on:click="count++">You clicked me {{ count }} times.</button>`
    });
    new Vue({
      el: "#app",
    });
  </script>
</body>
</html>
4

当用在组件上时，v-model 则会这样：

<!DOCTYPE html>
<html lang="en">
<head>
  <meta charset="UTF-8">
  <title>Title</title>
  <script src="../statics/vue.min.js"></script>
</head>
<body>
  <div >
    <!--第二步，使用-->
    <global_component></global_component>
  </div>
  <script>
    // 第一步，注册
    Vue.component("global_component", {
      data: function () {
        return {
          count: 0
        }
      },
      template: `<button v-on:click="count++">You clicked me {{ count }} times.</button>`
    });
    new Vue({
      el: "#app",
    });
  </script>
</body>
</html>
5

为了让它正常工作，这个组件内的 <input> 必须：

<!DOCTYPE html>
<html lang="en">
<head>
  <meta charset="UTF-8">
  <title>Title</title>
  <script src="../statics/vue.min.js"></script>
</head>
<body>
  <div >
    <!--第二步，使用-->
    <global_component></global_component>
  </div>
  <script>
    // 第一步，注册
    Vue.component("global_component", {
      data: function () {
        return {
          count: 0
        }
      },
      template: `<button v-on:click="count++">You clicked me {{ count }} times.</button>`
    });
    new Vue({
      el: "#app",
    });
  </script>
</body>
</html>
6

写成代码之后是这样的：

<!DOCTYPE html>
<html lang="en">
<head>
  <meta charset="UTF-8">
  <title>Title</title>
  <script src="../statics/vue.min.js"></script>
</head>
<body>
  <div >
    <!--第二步，使用-->
    <global_component></global_component>
  </div>
  <script>
    // 第一步，注册
    Vue.component("global_component", {
      data: function () {
        return {
          count: 0
        }
      },
      template: `<button v-on:click="count++">You clicked me {{ count }} times.</button>`
    });
    new Vue({
      el: "#app",
    });
  </script>
</body>
</html>
7

现在 v-model 就应该可以在这个组件上完美地工作起来了：

<!DOCTYPE html>
<html lang="en">
<head>
  <meta charset="UTF-8">
  <title>Title</title>
  <script src="../statics/vue.min.js"></script>
</head>
<body>
  <div >
    <!--第二步，使用-->
    <global_component></global_component>
  </div>
  <script>
    // 第一步，注册
    Vue.component("global_component", {
      data: function () {
        return {
          count: 0
        }
      },
      template: `<button v-on:click="count++">You clicked me {{ count }} times.</button>`
    });
    new Vue({
      el: "#app",
    });
  </script>
</body>
</html>
8

如下是在组件中使用v-model示例：

<!DOCTYPE html>
<html lang="en">
<head>
  <meta charset="UTF-8">
  <title>Title</title>
  <script src="../statics/vue.min.js"></script>
</head>
<body>
  <div >
    <!--第二步，使用-->
    <global_component></global_component>
  </div>
  <script>
    // 第一步，注册
    Vue.component("global_component", {
      data: function () {
        return {
          count: 0
        }
      },
      template: `<button v-on:click="count++">You clicked me {{ count }} times.</button>`
    });
    new Vue({
      el: "#app",
    });
  </script>
</body>
</html>
9


十、使用组件的注意事项

注意事项一：单个根元素

当构建一个内容页面的组件时，我们的组件可能包含多个HTML标签。

<!DOCTYPE html>
<html lang="en">
<head>
  <meta charset="UTF-8">
  <title>Title</title>
  <script src="../statics/vue.min.js"></script>
</head>
<body>
  <div >
    <!--第二步，使用-->
    <global_component></global_component>
    <global_component></global_component>
    <global_component></global_component>
  </div>
  <script>
    // 第一步，注册
    Vue.component("global_component", {
      data: function () {
        return {
          count: 0
        }
      },
      template: `<button v-on:click="count++">You clicked me {{ count }} times.</button>`
    });
    new Vue({
      el: "#app",
    });
  </script>
</body>
</html>
0

然而如果你在模板中尝试这样写，Vue 会显示一个错误，并解释道 every component must have a single root element (每个组件必须只有一个根元素)。你可以将模板的内容包裹在一个父元素内，来修复这个问题，例如：

<!DOCTYPE html>
<html lang="en">
<head>
  <meta charset="UTF-8">
  <title>Title</title>
  <script src="../statics/vue.min.js"></script>
</head>
<body>
  <div >
    <!--第二步，使用-->
    <global_component></global_component>
    <global_component></global_component>
    <global_component></global_component>
  </div>
  <script>
    // 第一步，注册
    Vue.component("global_component", {
      data: function () {
        return {
          count: 0
        }
      },
      template: `<button v-on:click="count++">You clicked me {{ count }} times.</button>`
    });
    new Vue({
      el: "#app",
    });
  </script>
</body>
</html>
1


注意事项二：解析特殊HTML元素

有些 HTML 元素，诸如 <ul>、<ol>、<table> 和 <select>，对于哪些元素可以出现在其内部是有严格限制的。而有些元素，诸如 <li>、<tr> 和 <option>，只能出现在其它某些特定的元素内部。

这会导致我们使用这些有约束条件的元素时遇到一些问题。例如：

<!DOCTYPE html>
<html lang="en">
<head>
  <meta charset="UTF-8">
  <title>Title</title>
  <script src="../statics/vue.min.js"></script>
</head>
<body>
  <div >
    <!--第二步，使用-->
    <global_component></global_component>
    <global_component></global_component>
    <global_component></global_component>
  </div>
  <script>
    // 第一步，注册
    Vue.component("global_component", {
      data: function () {
        return {
          count: 0
        }
      },
      template: `<button v-on:click="count++">You clicked me {{ count }} times.</button>`
    });
    new Vue({
      el: "#app",
    });
  </script>
</body>
</html>
2

这个自定义组件 <blog-post-row> 会被作为无效的内容提升到外部，并导致最终渲染结果出错。幸好这个特殊的 is 特性给了我们一个变通的办法：

<!DOCTYPE html>
<html lang="en">
<head>
  <meta charset="UTF-8">
  <title>Title</title>
  <script src="../statics/vue.min.js"></script>
</head>
<body>
  <div >
    <!--第二步，使用-->
    <global_component></global_component>
    <global_component></global_component>
    <global_component></global_component>
  </div>
  <script>
    // 第一步，注册
    Vue.component("global_component", {
      data: function () {
        return {
          count: 0
        }
      },
      template: `<button v-on:click="count++">You clicked me {{ count }} times.</button>`
    });
    new Vue({
      el: "#app",
    });
  </script>
</body>
</html>
3

需要注意的是如果我们从以下来源使用模板的话，这条限制是不存在的：

<!DOCTYPE html>
<html lang="en">
<head>
  <meta charset="UTF-8">
  <title>Title</title>
  <script src="../statics/vue.min.js"></script>
</head>
<body>
  <div >
    <!--第二步，使用-->
    <global_component></global_component>
    <global_component></global_component>
    <global_component></global_component>
  </div>
  <script>
    // 第一步，注册
    Vue.component("global_component", {
      data: function () {
        return {
          count: 0
        }
      },
      template: `<button v-on:click="count++">You clicked me {{ count }} times.</button>`
    });
    new Vue({
      el: "#app",
    });
  </script>
</body>
</html>
4




ZhouSa.com