Vue组件系统 -- 2019-08-08 18:01:47

Posted 2022-06-20 gqy02

tags:

篇首语：本文由小常识网(cha138.com)小编为大家整理，主要介绍了Vue组件系统 -- 2019-08-08 18:01:47相关的知识，希望对你有一定的参考价值。

全局组件
局部组件
混入
插槽
具名插槽
使用组件的注意事项

原文: 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的主要内容，如果未能解决你的问题，请参考以下文章

Vue实例生命周期 -- 2019-08-08 18:01:29

Vue组件系统 -- 2019-08-08 20:40:06

Vue路由系统详述 -- 2019-08-08 18:01:24

DRF认证 -- 2019-08-08 18:02:57

DjangoContentType组件 -- 2019-08-08 18:03:22

Flask入门篇 -- 2019-08-08 18:03:32