Vue学习笔记-组件

参考资料: 《Vue.js实战》 Vue.js官方文档

为什么使用组件

场景引入： 一个最简单的聊天页面, 包括以下几个button和按钮

:key 是为了跟踪每个节点的身份, 从而重用和冲排序现有的元素.

<div v-for="item in items" :key="item.id">
    <!-- 内容 -->
</div>
复制代码

ref被用来给元素或者子组件注册引用信息， 引用信息会注册在父组件的$refs对象上 直接通过this.$refs.tab来进行一个更新操作

• 组件的基础

// 定义一个名为 button-counter 的新组件
Vue.component('button-counter', {
  data: function () {
    return {
      count: 0
    }
  },
  template: '<button v-on:click="count++">You clicked me {{ count }} times.</button>'
})
复制代码

组件的组织: 树形结构

全局注册 和 局部注册

// 全局注册的例子
Vue.component('my-component-name', {
//...
})
复制代码

通过Prop向子组件传递数据

转载于:https://juejin.im/post/5c51062df265da61715eb5d2