Vue.js之组件系统

2018-11-15 17:02:09 发布 331 浏览

页面报错/反馈

已收藏点赞

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

Vue.js组件系统

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

组件的注册

全局组件的注册

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

DOCTYPE html>
html lang="en">
head>
  meta charset="UTF-8">
  title>Titletitle>
  script src="../statics/vue.min.js">script>
head>
body>
  div id="app">
    第二步，使用-->
    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>Titletitle>
  script src="../statics/vue.min.js">script>
head>
body>
  div id="app">
    第二步，使用-->
    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>Titletitle>
  script src="../statics/vue.min.js">script>
head>
body>
  div id="app">
    第二步，使用-->
    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>Titletitle>
  script src="../statics/vue.min.js">script>
head>
body>
  div id="app">
    第二步，使用-->
    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>Titletitle>
  script src="../statics/vue.min.js">script>
head>
body>
  div id="component-demo">
    最后在根元素当中使用它-->
    第一个中使用方式，会把当前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>Titletitle>
  script src="../statics/vue.min.js">script>
head>
body>
  div id="component-demo">
  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>Titletitle>
  script src="../statics/vue.min.js">script>
  style>
    body {
      margin: 0;
    }
    .box {
      width: 100%;
      height: 50px;
      background-color: #2aabd2;
    }

  style>
head>
body>
  div id="component-demo">
  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>`,

登录查看全部

参与评论