vue-组件1

组件注册

1.组件名：建议组件名的定义不要省略，命名规则为字母全小写-且包含一个连字符my-component-name kebab-case
2.组件名使用PascalCase：也可以使用PascalCase来命名组件MyComponentName，在单文件组件的方式引用时my-component-name和MyComponentName都有效。而在Dom(非字符串的模板)中使用时，只能识别kebab-case（小写加-）
3.components

var ComponentB = {
  components: {
    'component-a': ComponentA,
    ComponentC
  }
}

在components中，key：value，或者key的方式都可以，只有一个key说明该组件的名称就是key所对应的字符串，value为key对应的对象值
4.全局注册一定是在根vue实例下的
5.局部注册：像我们通常在单文件中引入并声明当前实例的components的方式属于局部注册
6.基础组件的自动化全局注册：有些组件属于基础组件，每个页面都要使用 ，这种情况可以用全局注册基础组件，具体参考示例代码

prop

1.命名：大小写不敏感，kebab-case和camelCase都可以
2.prop类型：支持对String Number Boolean Object Array Function Date Symbol 自定义类或者方法,类型进行验证，同时也可以是一个自定义的构造函数。传入不符合类型的值会给出错误提示（开发环境构建的版本）但代码还是能正常执行
3.传入一个对象的所有属性：v-bind不带参数

4.单向数据流：通过prop可以将数据从父级传向子级，而不能反过来。父组件更新，子组件对应的prop也会跟着更新。对象和数组是引用传递，如果父组件传递的prop是对象或数组，在子组件中对其改变，也会改变父组件的prop 建议不要这样在子组件中改变prop
如果非要改变，可以用以下两种方式

#定义一个本地data属性并将prop作为其初始值
props: ['initialCounter'],
data: function () {
  return {
    counter: this.initialCounter
  }
}

#使用prop初始值定义计算属性
props: ['size'],
computed: {
  normalizedSize: function () {
    return this.size.trim().toLowerCase()
  }
}

5.非prop的特性：非prop是指给父组件传了一个子组件并没有定义的特性。此特性会被添加到子组件的根元素上。
6.prop替换与合并：父组件如果传递给一个子组件已有的prop，则父组件传递的prop会替换子组件的prop，但如果该prop是style或者class，则会进行合并
7.特性继承 :inheritAttrs:true 默认为true，为false表示禁用继承，通常和$attrs一起使用，就可以手动决定这些特性会被赋予哪个元素

#子组件



#父组件

  

使用inheritAttrs:false和v-bind attrs解析出的html如下

自定义事件

自定义的事件名对大小写敏感，v-on 事件监听器在 DOM 模板中会被自动转换为全小写 (因为 HTML 是大小写不敏感的)，所以 v-on:myEvent 将会变成 v-on:myevent——导致 myEvent 不可能被监听到。建议始终用kebab-case来命名事件
1.自定义组件v-model ：组件的v-model默认会利用名为value的prop和名为input的事件。但也可以用以下方式使用

Vue.component('base-checkbox', {
  model: {
    prop: 'checked',
    event: 'change'
  },
  props: {
    checked: Boolean //组件中checked prop不能少
  },
  template: `
    
  `
})

lovingVue的值将会传入到名为checked的prop，当触发一个change事件并附带一个新值时，lovingVue的属性将会被更新

2. 原生事件绑定到组件：

    
    
我是元素

*点击我是组件 我是元素 都可以触发doThis函数，如果组件click事件去掉native修饰将不会触发doThis事件，因为Vue把它当做组件的自定义事件了，而组件的自定义事件的触发需要使用this.$emit(click') *

3.sync：通过sync可以实现父子组件的双向绑定

#子组件
export default {
  props: ["label"],
  data: function() {
    return { copyLabel: this.label };//不要直接对父组件传过来的prop进行修改，可以copy一份新的data出来
  },
  methods: {
    methodName() {
      this.copyLabel = "1234567";
      this.$emit("update:label", this.copyLabel);
    }
  }

#父组件

   

方法methodName触发时，执行update:label方法，并将copyLabel值传递过去
:label.sync="text" 其实是v-on:update:label="val=>text=val"的语法糖
当对多个属性进行同步时，也可以直接v-bind.sync="obj",这样会把 doc 对象中的每一个属性都作为一个独立的 prop 传进去，然后各自添加用于更新的 v-on 监听器。

9/100