标签：解析 gre 基本 back 新技术 元素 theme 商业 spl
原文: 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:47
标签：解析 gre 基本 back 新技术 元素 theme 商业 spl
原文地址：https://www.cnblogs.com/gqy02/p/11322798.html
