Vue2 学习笔记 - 第三篇：组件系统与通信机制

一、组件基础

Vue 组件是可复用的 Vue 实例，拥有独立作用域。组件必须通过 Vue.component() 注册或在父组件中使用 components 局部注册。

全局注册

Vue.component('my-component', {
  data() {
    return {
      msg: 'Hello'
    };
  },
  methods: {
    greet() {
      console.log(this.msg);
    }
  },
  template: '<div>{{ msg }}</div>'  // 字符串模板，实际开发建议使用 .vue 文件
});

局部注册

const Child = {
  data() {
    return { count: 0 };
  },
  template: '<span>{{ count }}</span>'
};

new Vue({
  components: {
    'child-component': Child
  }
});

---

二、组件通信

父 → 子：props

props: ['title']

• 父组件传递属性，子组件声明接收

子 → 父：$emit

this.$emit('eventName', data);

• 子组件使用 $emit 触发事件，父组件监听

---

三、插槽机制（Slot）

Vue 2 提供 <slot> 标签用于父组件向子组件插入内容。

默认插槽

<slot></slot>

具名插槽

<slot name="header"></slot>

---

四、组件生命周期（与实例类似）

组件的生命周期钩子与 Vue 实例一致，如：

• created
• mounted
• updated
• destroyed

可以在这些钩子中处理数据、发送请求或清理资源。

---

五、注意事项

• data 在组件中必须是函数，返回对象。
• 子组件不能直接修改父组件传入的 prop，需使用事件或 Vuex 等中间机制。

---