Vue.js(三)组件通信

Vue.js(三)组件通信

1. 组件

• Vue有两大核心内容

  • 指令
  • 组件

• 什么是组件化？【 为什么要用组件 】

  • 为了避免多人开发造成的冲突
  • 为了加快开发效率
  • 为了便利更新和维护
  • 组件化： 就是使用具有独立公共的一个整体【 组件 】来进行项目开发的一个趋势 【 流行 】

• 什么是组件？

  • 组件是一个html css js img 等的一个聚合体
  • 在Vue中使用了一个叫做单文件组件的技术来实现组件
  • 它是一个 xxx.vue 文件
  • 这个文件在浏览器不能运行，必须经过编译【 gulp webpack 】才能运行

• Vue里面是如何实现组件的？

  • 1. 通过实例化Vue构造器函数得到一个Vue实例,这个实例我们称之为’根实例’，它是最大的父级
  • 2. 这个根实例是以标签的形式存在的，那么我们也称之为’ 根组件 ’
  • 3. 根实例也是一个组件，但是我们得到只是跟组件
  • 4. Vue.extend() 它就是对Vue功能的扩展，这个扩展就是组件
  • 5. Vue是通过 Vue.extend() 来实现【 扩展 】 Vue的功能的，这个功能就是组件
  • 6. 思考: Vue.extend如何使用？
    • 通过new Vue.extend() 发现和new Vue一样了 排除了
    • 组件就是一个以标签化呈现的东西，所以我应该像标签一样使用
    • 但是无论是 html3 还是 html5 肯定不会同意它随意来个标签的
    • Vue会将组件编译成html结构
    • Vue的这个处理过程，我们称之为 ’ 组件注册 ’
      总结:
    1. Vue是通过Vue.extend() 来实现组件的
    2. Vue的组件的使用时需要注册的

• Vue中是如何使用组件的？

  • 组件注册
  • 全局注册
  • 局部注册
  • 组件的起名: 一定要避免和原生标签冲突 举例： Header header
    • 1. 大驼峰 HeadTitle 使用
    • 2. 小写横杠 head-title 使用
    • 3. 一个单词 Hello 使用 或者

2. **组件通信 **
   • 组件的嵌套
   • 组件中数据的定义
   • 组件通信
     • 父子组件通信
       • props选项
       • Props属性验证
       • props可以是一个对象
       • props中的validator函数
       • props第三方属性验证： vue-validator-help
     • 子父组件通信
       • 自定义事件 this.$emit
       • 非父子组件通信
       • ref
       • bus事件总线
   • 多组件状态共享
     • Vuex
3. 组件的使用规则？
   - 具有直接父子级关系的标签，会出现渲染问题，我们通过is属性来解决

<tr is = "Hello"></tr>

4. 动态组件
   • 动态组件指的是通过 Vue 提供的 component组件 + is 属性来实现
   • keep-alive组件实现缓存