Vue.js之组件系统

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>Title</title>
  <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>Title</title>
  <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>Title</title>
  <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>Title</title>
  <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>Title</title>
  <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>Title</title>
  <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>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 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>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 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>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 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', 0.1);
          console.log(this);
        }
      }
    };

let Header = {
      template: ` <div v-bind:class='{box: isBox}'>
          <first-content v-on:change-font="changeFont"></first-content>
          <span :style="{ fontSize: postFontSize + 'em' }">Hello Vue</span>
        </div>
 `,
      data() { return {
          count: 0,
          isBox: true,
          fathData: "我是你爸爸~~~",
          postFontSize: 1 }
      },
      components: { 'first-content': Fcontent
      },
      methods: {
        changeFont: function (value) { this.postFontSize += value;
        }
      }
    };

const VM = 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.js"></script>
</head>
<body>
    <div id="mixin-demo">
        <my-alex></my-alex>
        <p></p>
        <my-peiqi></my-peiqi>
    </div>

<script> let mixs = {
            methods: {
                show: function (name) {
                    console.log(`${name} is here!`);
                },
                hide: function (name) {
                    console.log(`${name} is gone!`);
                },
            }
        };

let myAlex = {
            template: ` <div>
                        <button @click="show('alex')">点我显示alex</button>
                        <button @click="hide('alex')">点我隐藏alex</button>
                    </div>
 `,
            mixins: [mixs],
        };

let myPeiqi = {
            template: ` <div>
                        <button @mouseenter="show('peiqi')">鼠标移入显示沛齐</button>
                        <button @mouseleave="hide('peiqi')">鼠标离开隐藏沛齐</button>
                    </div>
 `,
            mixins: [mixs],
        }; new Vue({
            el: "#mixin-demo",
            components: { "my-alex": myAlex, "my-peiqi": myPeiqi,
            }
        }) </script>

</body>
</html>
插槽

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

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>Title</title>
    <style> .nav-link { width: 100px; height: 100px; background-color: #2aabd2; float: left; margin-left: 5px; text-align: center; line-height: 100px;
        }

</style>
    <script src="../statics/vue.js"></script>
</head>
<body>
    <div id="app01">
        <com-content>登录</com-content>
        <com-content>注册</com-content>
        <com-content>最热</com-content>
        <com-content>段子</com-content>
        <com-content>42区</com-content>
        <com-content>图片</com-content>
    </div>

<script> Vue.component('com-content', {
          template: ` <div class="nav-link">
              <slot></slot>
            </div>
 `
        }); new Vue({
            el: "#app01",
        }) </script>

</body>
</html>
具名插槽

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

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>Title</title>
    <style> .nav-link { width: 100px; height: 100px; background-color: #2aabd2; float: left; margin-left: 5px; text-align: center; line-height: 100px;
        }
    </style>
    <script src="../statics/vue.js"></script>
</head>
<body>
    <div id="app01">
        <base-layout>
            <template slot="header">
                <h1>这是标题栏</h1>
            </template>
            <template>
                <h2>这是内容</h2>
            </template>
            <template slot="footer">
                <h3>这是页脚</h3>
            </template>
        </base-layout>
    </div>

<script> let baseLayout = {
            template: ` <div class="container">
                  <header>
                      <slot name="header"></slot>
                  </header>
                  <main><slot></slot></main>
                  <footer>
                      <slot name="footer"></slot>
                  </footer>
                </div>
 `
        }; new Vue({
            el: "#app01",
            components: { "base-layout": baseLayout
            }

}) </script>

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

回到顶部

在组件上使用v-model

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

<input v-model="searchText">
等价于：

<input v-bind:value="searchText" v-on:input="searchText = $event.target.value"
>
当用在组件上时， v-model 则会这样：

<custom-input v-bind:value="searchText" v-on:input="searchText = $event"
></custom-input>
为了让它正常工作，这个组件内的 <input> 必须：

将其 value 特性绑定到一个名叫 value 的 prop 上
在其 input 事件被触发时，将新的值通过自定义的 input 事件抛出
写成代码之后是这样的：

Vue.component('custom-input', {
  props: ['value'],
  template: ` <input v-bind:value="value" v-on:input="$emit('input', $event.target.value)"
    > `
})
现在 v-model 就应该可以在这个组件上完美地工作起来了：

<custom-input v-model="searchText"></custom-input>
如下是在组件中使用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 id="app">
  </div>

<script> let Model = {
      template: ` <div>
            <input
              v-bind:value="value" v-on:input="$emit('input', $event.target.value)"
            />
            <h1>{{ value }}</h1>
 `,
      props: ['value']
    };

let App = {
      template: ` <div>
            <custom-input v-model="searchText"></custom-input>
 `,
      components: { 'custom-input': Model,
      },
      data(){ return {
          searchText: "",
        }
      }
    }; new Vue({
      el: "#app",
      template: `<App></App>`,
 components: {
        App,
      }
    }) </script>
</body>
</html>
使用组件的注意事项

注意事项一：单个根元素

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

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

<div>
  <h1>Hello World</h1>
  <h2>Hello Vue</h2>
</div>
注意事项二：解析特殊HTML元素

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

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

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

<table>
  <tr is="blog-post-row"></tr>
</table>
需要注意的是如果我们从以下来源使用模板的话，这条限制是不存在的：

字符串 (例如：template: '...')
单文件组件 (.vue) <script type="text/x-template">
使用组件实现路飞导航栏

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>Title</title>
    <script src="../statics/vue.min.js"></script>
    <!-- 引入样式 -->
    <link rel="stylesheet" href="https://unpkg.com/element-ui/lib/theme-chalk/index.css">
    <!-- 引入组件库 -->
    <script src="https://unpkg.com/element-ui/lib/index.js"></script>
    <style> body { margin: 0; padding: 0;
        } .header { position: fixed; top: 0; left: 0; width: 100%;
        } .el-menu { display: flex; align-items: center; justify-content: center;
        } .footer { position: fixed; bottom: 0; left: 0; width: 100%;
        } .header img { position: absolute; left: 80px; top: -4px; width: 118px; height: 70px; z-index: 999;
        }

</style>
</head>
<body>

<div id="app">

</div>

<template id="header">
        <div class="header">
            <img src="https://www.luffycity.com/static/img/head-logo.a7cedf3.svg"/>
            <el-menu :default-active="activeIndex" class="el-menu-demo" mode="horizontal">
                <el-menu-item index="1">首页</el-menu-item>
                <el-menu-item index="2">免费课程</el-menu-item>
                <el-menu-item index="3">轻课</el-menu-item>
                <el-menu-item index="4">学位课程</el-menu-item>
                <el-menu-item index="5">智能题库</el-menu-item>
                <el-menu-item index="6">公开课</el-menu-item>
                <el-menu-item index="7">内部教材</el-menu-item>
                <el-menu-item index="8">老男孩教育</el-menu-item>
            </el-menu>
        </div>

</template>

<template id="footer">
        <div class="footer">

<el-menu class="el-menu-demo" mode="horizontal" background-color="black">
                <el-menu-item index="1">关于我们</el-menu-item>
                <el-menu-item index="2">联系我们</el-menu-item>
                <el-menu-item index="3">商业合作</el-menu-item>
                <el-menu-item index="4">帮助中心</el-menu-item>
                <el-menu-item index="5">意见反馈</el-menu-item>
                <el-menu-item index="6">新手指南</el-menu-item>
            </el-menu>

</div>

</template>

<script> let pageHeader = {
            template: "#header",
            data() { return {
                    activeIndex: "1",
                }
            }
        };

let pageFooter = {
            template: "#footer",
        };

let App = {
            template: ` <div>
                    <div>
                        <page-header></page-header>

</div>
                    <div>
                        <page-footer></page-footer>
                    </div>
                </div>
 `,
            components: { 'page-header': pageHeader, 'page-footer': pageFooter,
            }
        }; new Vue({
            el: "#app",
            template: `<app></app>`,
 components: { 'app': App,
            }
        }) </script>
</body>
</html>
效果图:

image

赞 (0)

相关推荐

  • Vue.js之组件系统

    vue.js既然是框架,那就不能只是简单的完成数据模板引擎的任务,它还提供了页面布局的功能.本文详细介绍使用vue.js进行页面布局的强大工具,vue.js组件系统. Vue.js组件系统 每一个新技术的诞生,都是为了解决特定的问题.组件的出现就是为了解决页面布局等等一系列问题.vue中的组件分为两种,全局组件和局部组件. 组件的注册 全局组件的注册 通过Vue.component()创建一个全局组件之后,我们可以在一个通过 new Vue 创建的 Vue 根实例中,把这个组件作为自定义元素来使

  • Vue.js划分组件的方法

    Vue.js划分组件的方法

    常见的一些页面,大家坐在一起敲代码就可以了,做完这个页面再做别的页面,但是作为一个功能复杂的系统,尤其是使用一些适合模块化开发的框架,这样会显得效率很低,那么我们就单纯的看在Vue里面如何划分组件的. 总结下来有两种可以划分,两种划分的方法一种是页面上的功能块,select,pagenation,和一些需要大量代码去实现的一些部分,我们可以把它提取出来放到一起或者分类.还有一种根据页面区域来划分,header,footer,sidebar,有了组件之后Vue的组件是怎么实现的? Vue的组件是怎

  • Vue.js路由组件vue-router使用方法详解

    使用Vue.js + vue-router 创建单页应用是非常简单的.只需要配置组件和路由映射,然后告诉 vue-router 在哪里渲染即可. 一.普通方式基本例子: <!DOCTYPE html> <html lang="en"> <head> <meta charset="UTF-8"> <title>vue-router使用方法</title> </head> <bod

  • 关于vue.js弹窗组件的知识点总结

    首先在开发时需要考虑以下三点: 1.进入和弹出的动画效果. 2.z-index 的控制 3.overlay 遮盖层 关于动画 vue 对于动画的处理相对简单,给组件加入css transition 动画即可 <template> <div class="modal" transition="modal-scale"> <!--省略其它内容--> </div> </template> <script&g

  • Vue.js动态组件解析

    本篇资料来于官方文档:http://cn.vuejs.org/guide/components.html#u52A8_u6001_u7EC4_u4EF6 本文是在官方文档的基础上,更加细致的说明,代码更多更全. 简单来说,更适合新手阅读 ①简单来说: 就是几个组件放在一个挂载点下,然后根据父组件的某个变量来决定显示哪个,或者都不显示. ②动态切换: 在挂载点使用component标签,然后使用v-bind:is="组件名",会自动去找匹配的组件名,如果没有,则不显示: 改变挂载的组件,

  • Vue.js中组件中的slot实例详解

    Vue组件中的slot slot 可以实现在已经定义的组件中添加内容,组件会接收内容并输出,假如有一个组件person,它的里面包含的是个人信息,如下面这样 <template id="per"> <div> <p>姓名:...</p> <p>年龄:...</p> <p>职业:...</p> </div> </template> 在应用的时候,当然希望这里面可以是灵活

  • 详解vue.js全局组件和局部组件

    详解vue.js全局组件和局部组件

    这两天学习了Vue.js 感觉组件这个地方知识点挺多的,而且很重要,所以,今天添加一点小笔记. 首先Vue组件的使用有3个步骤,创建组件构造器,注册组件,使用组件3个方面. 代码演示如下: <!DOCTYPE html> <html> <body> <div id="app"> <!-- 3. #app是Vue实例挂载的元素,应该在挂载元素范围内使用组件--> <my-component></my-compo

  • vue.js树形组件之删除双击增加分支实例代码

    html代码: <script type="text/x-template" id="item-template"> <li> <div :class="{bold: isFolder}" @click="toggle"> {{model.name}} <span v-if="isFolder">[{{open ? '-' : '+'}}]</span&

  • 探讨Vue.js的组件和模板

    探讨Vue.js的组件和模板

    摘要: 指令是Vue.js中一个重要的特性, 主要提供了一种机制将数据的变化映射为DOM行为. 那什么交数据的变化映射为DOM行为, Vue.js是通过数据驱动的, 所以我们不会直接去修改DOM结构, 不会出现类似$('ul').append('<li>one</li>')这样的操作, 当数据变化时,指令会一句设定好的操作对DOM进行修改, 这样就可以只关注数据的变化, 而不用去管理DOM的变化和状态, Vue的内置指令 1. v-bind v-bind主要用于绑定DOM元素属性(

  • Vue.js分页组件实现：diVuePagination的使用详解

    Vue.js分页组件实现：diVuePagination的使用详解

    一.介绍 Vue.js 是什么 Vue (读音 /vjuː/,类似于 view) 是一套用于构建用户界面的渐进式框架.与其它大型框架不同的是,Vue 被设计为可以自底向上逐层应用.Vue 的核心库只关注视图层,不仅易于上手,还便于与第三方库或既有项目整合.另一方面,当与现代化的工具链以及各种支持类库结合使用时,Vue 也完全能够为复杂的单页应用提供驱动. 二.创建初始化项目 这里不在详细说明,我们的分页演示只需要vue和vue-router就可以了,我们直接构建项目和设置配置. main.js:

随机推荐