【Vue组件系统】2019080820:40:06

原文: http://106.13.73.98/__/52/

vue.js既然是框架，那就不能只是简单的完成数据模板引擎的任务，它还提供了页面布局的功能。本文将详细介绍使用vue.js进行页面布局的强大工具——vue.js组件系统。

每一个新技术的诞生，都是为了解决特定的问题。
组件的出现就是为了解决页面布局等等一系列的问题。
Vue中的组件分为两种：==全局组件与局部组件.==
@

全局组件

注册

方式一：

方式二：

局部组件

全局注册往往是不够理想的。比如，如果你使用一个像 webpack 这样的构建系统，全局注册所有的组件意味着即便你已经不再使用一个组件了，它仍然会被包含在你最终的构建结果中。这造成了用户下载的 Javascript 无谓的增加。

全局组件适中是存在的，除非程序结束，如果组件越来越大，那么程序所占用的空间和消耗的性能就会更大。

所以我们需要使用局部组件。不用的时候，被垃圾回收。
***

注册

方式一：

方式二：

对于components 对象中的每个属性来说，其属性名就是自定义元素的名字，其属性值就是这个组件的选项对象。
***

子组件的用法

父子组件的通讯

子父组件的通讯

下面示例的基本思路：
·
子组件与父组件各定义一个事件，且子组件事件函数中可触发父组件的事件.

1. 先触发子组件中的事件——执行子组件事件函数；
2. 在子组件的事件函数中触发父组件的事件，同时向父组件传入数据；
3. 父组件事件被触发，同时接收传入的数据，执行事件，ok.

非父子组件的通讯

混入

==混入可提高代码的重用性.==

插槽

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

    
    
    



    test01
    test02
    test03
    test04
    test05

具名插槽

该操作使用了组件的复用，通过使用具名插槽，我们可以在同一个组件内写入不同的页面，并且给不同的内容命名.

    
    
    



    
        
        
test01
        
test02
        
test03
        
test04
        
test05
    

使用组件的注意事项

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

Hello World
Hello Vue

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

  Hello World
  
Hello Vue

解析特殊的HTML元素

有些HTML元素，必须

、
、和，对于哪些元素可以出现在其内部是有严格限制的，而有些元素，例如
1. 、
和，只能出现在其它某些特定元素的内部。

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

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

需要注意的是，如果我们从以下来源使用模板的话，这条限制是不存在的：

字符串 (例如：template: &＃39;...&＃39;)
单文件组件 (.vue)

    
    
    
    
    

原文: http://106.13.73.98/__/52/

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