Vue组件化开发（二）| 一起学系列

携手创作，共同成长！这是我参与「掘金日新计划 · 8 月更文挑战」的第8天，点击查看活动详情

• 局部注册

  • 只能用在当前实例或组件中
  • 单独配置组件的选项对象： ES6的对象属性简写：属性名和值相同，只需要书写一个即可，兼容性没有上图好

• 组件通信

  • 在组件间传递数据的操作，叫做组件通信
  • 需要解决的几个问题：
    • 子组件如何获取父组件中的数据？
    • 父组件如何得知子组件的数据变更？
    • 如果是更加复杂的组件关系呢？

• 父组件向子组件传值

  • 通过子组件的props选项接收父组件的传值 注意：props不要与data并存同名属性

  • 父组件设置方式如下（第一种为静态；第二种为动态，使用JS语法静态值写，一般不会使用；第三中使用v-bind绑定） 注意：首先在根实例中设置变量，然后传给子组件，然后在html文件中还得绑定给自定义的子组件

• 父组件向子组件传值-Props命名规则

  • 建议prop命名使用camelCase（驼峰命名法），父组件绑定时使用kebab-case
  • 案例：使用v-for遍历数据，创建组件并生成内容

• 父组件向子组件传值-单向数据流

  • 父子组件间的所有prop都是单向下行绑定的（只能父往子传）
  • 如果子组件要处理prop数据，应当存储在data中后操作
  • 注意：如果prop为数组或对象时，子组件操作将会影响到父组件的状态 本期的内容就到这里啦！让我们明天一起继续学习Vue.js吧!