首页
所有分类
TAGS
文字工具 EMOJI BIBLE
编程 Javascript

Vue.js中的组件系统

Posted in Javascript onMay 30, 2019

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>

效果图:

Vue.js中的组件系统

总结

以上所述是小编给大家介绍的Vue.js中的组件系统,希望对大家有所帮助，如果大家有任何疑问请给我留言，小编会及时回复大家的。在此也非常感谢大家对三水点靠木网站的支持！
如果你觉得本文对你有帮助，欢迎转载，烦请注明出处，谢谢！

Vue.js中的组件系统

- Author -

子瑜说IT

声明：登载此文出于传递更多信息之目的，并不意味着赞同其观点或证实其描述。

Javascript 相关文章推荐
javascript中的location用法简单介绍
Mar 07 Javascript
aspx中利用js实现确认删除代码
Jul 22 Javascript
菜鸟javascript基础整理1
Dec 06 Javascript
Jquery自定义button按钮的几种方法
Jun 11 Javascript
jquery获取文档高度和窗口高度汇总
Jan 25 Javascript
基于JavaScript实现类似于百度学术高级检索功能
Mar 02 Javascript
JavaScript中用let语句声明作用域的用法讲解
May 20 Javascript
AngularJs ng-repeat 嵌套如何获取外层$index
Sep 21 Javascript
深入理解Angularjs中$http.post与$.post
May 19 Javascript
详解如何在 vue 项目里正确地引用 jquery 和 jquery-ui的插件
Jun 01 jQuery
Flutter实现仿微信底部菜单栏功能
Sep 18 Javascript
你可能从未使用过的11+个JavaScript特性(小结)
Jan 08 Javascript
Vue+Django项目部署详解
May 30 #Javascript
了解重排与重绘
May 29 #Javascript
小程序如何构建骨架屏
May 29 #Javascript
新手简单了解vue
May 29 #Javascript
详细讲解如何创建, 发布自己的 Vue UI 组件库
May 29 #Javascript
基于JS实现一个随机生成验证码功能
May 29 #Javascript
微信小程序mpvue点击按钮获取button值的方法
May 29 #Javascript
mysql(6) OVERLORD(1) 2022年7月新番(1) 算法(1) character(1) Vscode(3) 字符集(1) 数据表(1) 时钟(1) SSH(3)
You might like
PHP数组操作――获取数组最后一个值的方法
2015/04/14 PHP
php中遍历二维数组并以表格的形式输出的方法
2017/01/03 PHP
PHP构造二叉树算法示例
2017/06/21 PHP
Jquery ui css framework
2010/06/28 Javascript
基于jquery的3d效果实现代码
2011/03/23 Javascript
一个挺有意思的Javascript小问题说明
2011/09/26 Javascript
treepanel动态加载数据实现代码
2012/12/15 Javascript
jQuery学习之prop和attr的区别示例介绍
2013/11/15 Javascript
基于Jquery和CSS3制作数字时钟附源码下载(CSS3篇)
2015/11/24 Javascript
js实现PC端和移动端刮卡效果
2020/03/27 Javascript
js判断手机系统是android还是ios
2017/03/07 Javascript
vue实现表格数据的增删改查
2017/07/10 Javascript
[04:13]2014DOTA2国际邀请赛 专访DC目前形势不容乐观
2014/07/12 DOTA
[55:25]VGJ.T vs Optic Supermajor小组赛D组 BO3 第三场 6.3
2018/06/04 DOTA
[52:05]EG vs OG 2019国际邀请赛小组赛 BO2 第二场 8.16
2019/08/18 DOTA
python里将list中元素依次向前移动一位
2014/09/12 Python
用Python展示动态规则法用以解决重叠子问题的示例
2015/04/02 Python
Windows安装Python、pip、easy_install的方法
2017/03/05 Python
python中闭包Closure函数作为返回值的方法示例
2017/12/17 Python
Python常见字符串操作函数小结【split()、join()、strip()】
2018/02/02 Python
Python 实现在文件中的每一行添加一个逗号
2018/04/29 Python
python TKinter获取文本框内容的方法
2018/10/11 Python
Pyinstaller打包.py生成.exe的方法和报错总结
2019/04/02 Python
如何在 Django 模板中输出 &quot;{{&quot;
2020/01/24 Python
纯css3实现宠物小鸡实例代码
2018/10/08 HTML / CSS
移动端html5 meta标签的神奇功效
2016/01/06 HTML / CSS
使用HTML5加载音频和视频的实现代码
2020/11/30 HTML / CSS
Lookfantastic挪威官网：英国知名美妆购物网站
2017/07/26 全球购物
JPA的特点
2014/10/25 面试题
如何用Python来进行查询和替换一个文本字符串
2014/01/02 面试题
水污染治理工程专业自荐信
2014/06/21 职场文书
2014物价局民主生活会对照检查材料思想汇报
2014/09/24 职场文书
教师自查自纠材料
2014/10/14 职场文书
大学生个人总结范文
2015/02/15 职场文书
2015年保育员个人工作总结
2015/05/13 职场文书
Go语言空白表示符_的实例用法
2021/07/04 Golang