自定义v-model

下面的 **input**使用**:value**而不是**v-model**
下面的**change1**和**model.event**对应
下面的**text1**属性对应

  1. // parent
  2. <p>{{ name }}</p>
  3. <customModel v-model="name" />
  5.  // child
  6.  <input type="text" :value="text1" @input="$emit('change1', $event.target.value)" />
  7. <script>
  8. export default {
  9.   model: {
  10.     prop: 'text1',
  11.     event: 'change1'
  12.   },
  13.     props: {
  14.     text1: String
  15.   }
  16. }
  17. </script>


$nextTick

  • vue是异步渲染的
  • data改变后，dom不会立刻改变
  • nextTick 是dom渲染完后再回调
  • 页面渲染会将data整合，多次修改data只会渲染一次

slot

  • 具名插槽
  • 作用域插槽 ```vue // 父 // 缩写 #default=”{user}” {{ user.firstName }}

// 子 {{ user.lastName }} 

  1. > **父级模板里的所有内容都是在父级作用域中编译的；子模版里的所有内容都是在子作用域中编译的**
  4. <a name="nQQA9"></a>
  5. #### 动态组件
  6. 语法：`:is="componentName"`
  8. <a name="h2fjZ"></a>
  9. #### 异步组件（组件较大）
  10. 语法：`() =>``import``([文件名])`
  12. <a name="ZBTSb"></a>
  13. #### 缓存组件
  14. `keep-alive`
  16. <a name="lY2yh"></a>
  17. #### mixins
  18. 多个组件相同逻辑，抽离出来<br />问题：
  20. - 变量来源不明确，不利于阅读
  21. - 多mixin可能会造成命名冲突
  22. - mixin和组件可能出现多对多的关系，复杂度高
  25. <a name="DtGJS"></a>
  26. #### 自定义事件
  27. ```javascript
  28. import Vue from 'vue'
  30. export default new Vue()
  32. // event.$emit 和 event.$on