Vue组件系统 -- 2019-08-08 18:01:48
Posted gqy02
tags:
篇首语:本文由小常识网(cha138.com)小编为大家整理,主要介绍了Vue组件系统 -- 2019-08-08 18:01:48相关的知识,希望对你有一定的参考价值。
原文: http://106.13.73.98/__/52/
vue.js既然是框架,那就不能只是简单的完成数据模板引擎的任务,它还提供了页面布局的功能。本文将详细介绍使用vue.js进行页面布局的强大工具——vue.js组件系统。
每一个新技术的诞生,都是为了解决特定的问题。
组件的出现就是为了解决页面布局等等一系列的问题。
Vue中的组件分为两种:==全局组件与局部组件.==
@
全局组件
注册
方式一:
<body>
<div id="app"></div>
</body>
方式二:
<body>
<div id="app">
<!--调用自定义的标签名 可重复调用 -->
<global-component></global-component>
<global-component></global-component>
</div>
</body>
局部组件
全局注册往往是不够理想的。比如,如果你使用一个像 webpack 这样的构建系统,全局注册所有的组件意味着即便你已经不再使用一个组件了,它仍然会被包含在你最终的构建结果中。这造成了用户下载的 javascript 无谓的增加。
全局组件适中是存在的,除非程序结束,如果组件越来越大,那么程序所占用的空间和消耗的性能就会更大。
所以我们需要使用局部组件。不用的时候,被垃圾回收。
***
注册
方式一:
<body>
<div id="app">
<!--第三步:在根元素中使用-->
<!--会将当前div渲染进DOM(也就是这里id为app的div)-->
<my-header></my-header>
</div>
</body>
方式二:
<body>
<div id="app"></div>
</body>
对于components 对象中的每个属性来说,其属性名就是自定义元素的名字,其属性值就是这个组件的选项对象。
***
子组件的用法
<body>
<div id="app"></div>
</body>
父子组件的通讯
<body>
<div id="app"></div>
</body>
子父组件的通讯
下面示例的基本思路:
·
子组件与父组件各定义一个事件,且子组件事件函数中可触发父组件的事件.
- 先触发子组件中的事件——执行子组件事件函数;
- 在子组件的事件函数中触发父组件的事件,同时向父组件传入数据;
- 父组件事件被触发,同时接收传入的数据,执行事件,ok.
<body>
<div id="app"></div>
</body>
非父子组件的通讯
<body>
<div id="app">
<zyk01></zyk01>
<zyk02></zyk02>
</div>
</body>
混入
==混入可提高代码的重用性.==
<body>
<div id="app">
<test01></test01>
<test02></test02>
</div>
</body>
插槽
有时候我们需要向组件传递一些数据,这时候可以使用插槽.
<!DOCTYPE html>
<html lang="zh-CN">
<head>
<title>test</title>
<style>
.box
width: 50px;
height: 50px;
background-color: green;
float: left;
margin-left: 5px;
</style>
</head>
<body>
<div id="app">
<global-component>test01</global-component>
<global-component>test02</global-component>
<global-component>test03</global-component>
<global-component>test04</global-component>
<global-component>test05</global-component>
</div>
</body>
</html>
具名插槽
该操作使用了组件的复用,通过使用具名插槽,我们可以在同一个组件内写入不同的页面,并且给不同的内容命名.
<!DOCTYPE html>
<html lang="zh-CN">
<head>
<title>test</title>
<style>
.box
width: 50px;
height: 65px;
background-color: green;
float: left;
margin-left: 5px;
</style>
</head>
<body>
<div id="app">
<global-component>
<!--定义具名插槽-->
<div slot="test01">test01</div>
<div slot="test02">test02</div>
<div slot="test03">test03</div>
<div>test04</div>
<div>test05</div>
</global-component>
</div>
</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)
<!-- 引入样式 -->
<link rel="stylesheet" href="https://unpkg.com/element-ui/lib/theme-chalk/index.css">
<!-- 引入组件库 -->
<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">标题01</el-menu-item>
<el-menu-item index="2">标题02</el-menu-item>
<el-menu-item index="3">标题03</el-menu-item>
<el-menu-item index="4">标题04</el-menu-item>
<el-menu-item index="5">标题05</el-menu-item>
<el-menu-item index="6">标题06</el-menu-item>
<el-menu-item index="7">标题07</el-menu-item>
<el-menu-item index="8">标题08</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>
</body>
</html>
原文: http://106.13.73.98/__/52/
以上是关于Vue组件系统 -- 2019-08-08 18:01:48的主要内容,如果未能解决你的问题,请参考以下文章
Vue实例生命周期 -- 2019-08-08 18:01:29
Vue组件系统 -- 2019-08-08 20:40:06
Vue路由系统详述 -- 2019-08-08 18:01:24