vue学习（2）—— vue组件化

组件化

Vue组件化思想

vue组件定义：

vue组件化、模块化

创建组件方式一：

1、使用Vue.extend({})创建全局组件

2、使用Vue.component('组件名称'，组件模板对象)

3、在使用时，把组件的名称以HTML标签的形式引入

注意：如果组件名称为驼峰映射，则标签名格式为全小写，单词中间用 - 连接

           如果组件名称不是驼峰命名，则标签名为全小写，同组件名称

注册组件步骤解析

 

创建组件方式二：

直接使用Vue.component('组件名称',{template:'模板'})创建并定义

注意：template指向的模板，只能有一个根标签（最外层标签）只能有一个，多个标签不能并列为同一级根标签，可以包含

以上两种方式，在定义模板时都要使用''引号定义，字符串格式，不方便书写，没有提示

创建组件方式三：

1、在被Vue控制的元素外面，使用template元素，创建模板

2、使用Vue.component('组件名称',{template:'#id'})定义

3、以组件名称作为元素标签来使用

 

全局组件：多个vue实例控制的元素都可以使用

 

创建并定义私有化组件，私有化组件只能在本vm实例控制的元素中使用，其他的Vue实例不能使用

定义格式如下,在Vue构造函数中使用componenets:{   组件名称: {template:'#id'}  }

使用方式同方式三

组件中的data：

 

全局组件、局部组件

 

父组件、子组件

 

组件注册语法糖

语法糖示例 

 

组件注册的模板分离写法

 

组件中的data

 

组件的data为什么是一个函数，并且必须有return返回

组件中的data如果是一个属性、对象，则是一个全局的属性，每个组件实例在使用的时候都会共享操作这个属性，然而组件用在不同的地方都应该有自己的data数据，不应该影响其他实例或者被其他实例影响；采用函数，则组件在实例化的时候都会调用函数返回一个新的实例对象，多个实例对象分别有自己的数据，不会操作共享数据，相互之间没有影响