Vue.js之组件系统

番茄西红柿发布于2019-04-23 13:11 / 2465人阅读

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">
    
    
    <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>`,
      // 第二步，需要在根实例当中使用它
      components: {
        my-header: Header
      }
    });
  script>
body>
html>

注:

1.注意写组件标签

2.每个组件的template只识别一个作用域块

通信

父子组件的通信

在父组件中给子组件绑定属性,子组件通过props=["属性名称"]

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类型
    // 属性与全局组件是一样的

    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>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类型
    // 属性与全局组件是一样的

    let Fcontent = {
      template: `
        <div>
          <button v-on:click="myClick">放大父组件字体</button>
        </div>
      `,
      methods: {
        myClick: function () {
          console.log(this);
          this.$emit(change-font
                 
                                                                                                                    
                         混合云
                                             
                         服务器托管
                                                                                                                                                 
                                      
                     
                    
                                                                                               Vue.js
                                                                                                           然之开源系统
                                                                                                           vue.js 属性
                                                                                                           vue.js自学

文章版权归作者所有，未经允许请勿转载,若此文章存在违规行为，您可以联系管理员删除。

转载请注明本文地址：https://www.ucloud.cn/yun/1541.html

关于Vue2一些值得推荐的文章 -- 五、六月份

摘要：五六月份推荐集合查看最新的请点击集前端最近很火的框架资源定时更新，欢迎一下。苏幕遮燎沈香宋周邦彦燎沈香，消溽暑。鸟雀呼晴，侵晓窥檐语。叶上初阳乾宿雨，水面清圆，一一风荷举。家住吴门，久作长安旅。五月渔郎相忆否。小楫轻舟，梦入芙蓉浦。五、六月份推荐集合查看github最新的Vue weekly；请::点击::集web前端最近很火的vue2框架资源；定时更新，欢迎 Star 一下。苏...

Terry_Tai 2019-08-05 17:19 评论0 收藏0
关于Vue2一些值得推荐的文章 -- 五、六月份

摘要：五六月份推荐集合查看最新的请点击集前端最近很火的框架资源定时更新，欢迎一下。苏幕遮燎沈香宋周邦彦燎沈香，消溽暑。鸟雀呼晴，侵晓窥檐语。叶上初阳乾宿雨，水面清圆，一一风荷举。家住吴门，久作长安旅。五月渔郎相忆否。小楫轻舟，梦入芙蓉浦。五、六月份推荐集合查看github最新的Vue weekly；请::点击::集web前端最近很火的vue2框架资源；定时更新，欢迎 Star 一下。苏...

sutaking 2019-08-02 15:17 评论0 收藏0
关于Vue2一些值得推荐的文章 -- 五、六月份

摘要：五六月份推荐集合查看最新的请点击集前端最近很火的框架资源定时更新，欢迎一下。苏幕遮燎沈香宋周邦彦燎沈香，消溽暑。鸟雀呼晴，侵晓窥檐语。叶上初阳乾宿雨，水面清圆，一一风荷举。家住吴门，久作长安旅。五月渔郎相忆否。小楫轻舟，梦入芙蓉浦。五、六月份推荐集合查看github最新的Vue weekly；请::点击::集web前端最近很火的vue2框架资源；定时更新，欢迎 Star 一下。苏...

khs1994 2019-08-23 18:08 评论0 收藏0
Vue 2.x 实战之后台管理系统开发（二）

摘要：导语承接上文实战之后台管理系统开发一在上一篇文章中，我详细叙述了如何创建项目框架和引入各种后台常用插件，做好这些准备工作后，我们就可以着手进行页面的开发了。如果传入的数据不符合规格，会发出警告。 1. 导语承接上文：Vue 2.x 实战之后台管理系统开发（一）在上一篇文章中，我详细叙述了如何创建项目框架和引入各种后台常用插件，做好这些准备工作后，我们就可以着手进行页面的开发了。在开...

Ilikewhite 2019-08-20 17:01 评论0 收藏0
利用K8S技术栈打造个人私有云（连载之：私有云客户端打造）

摘要：前端技术栈还是非常庞大的，为了能够借助已经存在的轮子来造出一辆车，所以我选择了进行实践。状态的管理的状态管理依靠完成，用其来管理的所有组件状态。私有云客户端打造主页面首先是主页面，可以打开任何一个云主机系统的页面看，基本类似。 showImg(https://segmentfault.com/img/remote/1460000013930354); 【利用K8S技术栈打造个人私有...

Jingbin_ 2019-06-28 16:19 评论0 收藏0