vue组件

Vue组件

1. 什么是组件
   组件的概念：组件即自定义控件，是Vue.js最强大的功能之一
   组件的用途：组件能够封装可重用代码，扩展html标签功能
   组件的本质：自定义标签
2. 组件的分类
   全局组件：不同作用域内均可使用
   局部组件：只在定义该组件的作用域内使用
3. 全局组件
   建议：组件名 (字母全小写且必须包含一个连字符)。这会帮助你避免和当前以及未来的 HTML 元素相冲突。
   定义位置：创建实例前定义全局组件
   template的设置：
   template：‘html代码’
   template：’#template1’引用template内容
   全局组件的调用
   组件的调用方法：<组件名></组件名>
   组件的作用域：全局范围内均可调用
   小结
   组件中数据的定义：需以函数返回值的形式定义数据
   组件的调用：组件本质为标签，调用方式与调用标签相同
4. 局部组件
   局部组件的定义
   语法：定义在vue实例中只能在当前实例范围内生效
   定义位置：实例配置项中定义
   template的设置：
   template：‘html代码’
   template：’#template1’
   局部组件的调用：
   调用的方法：<组件名>< /组件名>
   组件的作用域:定义该组件的作用域内可调用
   组件在命名时如果是驼峰命名法 那么在调用的时候用-替代大写 “myText”调用< my-text></ my-text>
   小结
   组件中数据的定义：需以函数返回值的形式定义数据
   组件的调用：组件本质为标签，调用方式与调用标签相同
5. 组件高级
6. props 选项
   props 选项的作用:props选项用来声明它期待获得的数据
   props 本质：props 为元素属性
7. props 的声明
   语法：如果是驼峰命名法需要把大写转小写前面加-
   js中：props:[‘message1’, 'messAge2]
   HTML中：<组件 message='val’mess-age2=‘val’></组件>
8. props 的使用
   与 data 一样，props 可以用在模板中
   可以在 vm 实例中像 this.message 这样使用
9. props 验证常见问题
   为什么写的没有错但是没有错误提示？
   生产版本也就是压缩版的文件删除了警告，所以使用非压缩版的js文件就可以看到错误