vue.js中级进阶

组件注册 Vue.component()

组件名大小写

• 使用kebab-case：小写和连字符-；
• 使用PascalCase:驼峰命名。
  强烈建议，使用kebab-case命名。

当驼峰命名的首字母大写时，两种方法都能引用生效,都接受；
直接在DOM中使用时，只有kebab-case生效；

全局注册 和 局部注册

• 作用域不同，局部注册在自己子组件内不可用
• 打包时，全局会被打包，即使没有被使用
  因此，将component赋值变量，再组件components内引用，实现复用。

模块系统

1. 使用Webpack和Babel的模块系统时，推荐把各组件文件夹放在components根目录中，通过import ComponentA from "./components/componentA"引用。
2. 自动化全局注册：

//入口文件中导入自动化全局组件配置
import Vue from 'vue'
import upperFirst from 'lodash/upperFirst'
import camelCase from 'lodash/camelCase'

const requireComponent = require.context(
  // 其组件目录的相对路径
  './components',
  // 是否查询其子目录
  false,
  // 匹配基础组件文件名的正则表达式
  /Base[A-Z]\w+\.(vue|js)$/
)

requireComponent.keys().forEach(fileName => {
   
  // 获取组件配置
  const componentConfig = requireComponent(fileName)

  // 获取组件的 PascalCase 命名
  const componentName = upperFirst(
    camelCase(
      // 剥去文件名开头的 `./` 和结尾的扩展名
      fileName.replace(/^\.\/(.*)\.\w+$/, '$1')
    )
  )

  // 全局注册组件
  Vue.component(
    componentName,
    // 如果这个组件选项是通过 `export default` 导出的，
    // 那么就会优先使用 `.default`，
    // 否则回退到使用模块的根。
    componentConfig.default || componentConfig
  )
})

全局注册行为必须在根Vue实例创建之前。

属性特性prop

prop的大小写

HTML中特性名(属性)对大小写不敏感，不能直接在DOM中使用驼峰命名prop，但是在``template中不受限制。 建议使用kebab-case命名，避开这些问题。 书写格式：props:[“key”]props:{key:类型}`

key:类型，指定值类型string\number\boolean\array\object

传递动态或静态prop值

``v-bind:props=“val.title”`动态传值；

对象，数字，数组，布尔值等静态值，仍然需要v-bind绑定说明不是字符串，而是JS表达式：v-bind:props="42"；
传入props下的一个对象时候，使用不带参数的v-bind=""取代v-bind:prop-name=""；

//javascript
props:{
   
  post:{
   
    id:1,
    title:yo
  }
}
//html
<blog-post v-bind="post"></blog-post>
//等价于
<blog-post :id="post.id" :title="post.title"></blog-post>

props单向数据流–父子通信

所有的prop都是父级单向下行绑定，但是对象或数组的props传入子组件函数，被改变时会影响父组件的状态。

props的验证

props会在组件创建之前进行验证，因此实例的属性，如data、computed等在default或validator函数中，不可用.

参考：生命周期钩子

语法：

  props:{
   
    prop:Number,
    prop:[Number,String],
    prop:{
   
      //string、number、boolean、array、object、date、function、symbol
      type:String,
      required:true