Vue2 组件化应用构建学习笔记

Vue2 组件化应用构建学习笔记

一、引言

Vue.js 是一套用于构建用户界面的渐进式框架，其核心库专注于视图层，易于上手且与第三方库或既有项目整合。组件化是 Vue.js 的一个重要概念，它允许我们使用小型、独立和可复用的组件来构建大型应用。本文将基于 Vue2 的官方文档，介绍 Vue2 中组件化应用构建的基本概念和实现方法。

二、组件基础

1. 什么是组件？

   Vue 组件是一个预定义的 Vue 实例，可以扩展基本的 HTML 元素，以封装可重用的代码。组件具有自己的模板、逻辑和样式，可以像 HTML 元素一样在模板中使用。

2. 注册组件

   Vue 提供了两种注册组件的方式：全局注册和局部注册。

   • 全局注册：使用 Vue.component(tagName, options) 方法注册一个全局组件，它可以在任何新创建的 Vue 实例的模板中使用。

     Vue.component('my-component', {
            
         template: '
     A custom component!
     '
     });
     

   • 局部注册：在 Vue 实例或另一个组件的 components 选项中注册一个局部组件，它只能在该实例或组件的模板中使用。

     var Child = {
            
         template: '
     A child component!
     '
     };
     
     new Vue({
            
         el: '#app',
         components: {
            
             'child-component': Child
         }
     });
     

3. 组件的使用

   在模板中，组件标签会以自定义元素的形式出现。Vue 会将这些自定义元素替换为组件实例的根元素。

   <div id="app">
       <my-component>my-component>
       <child-component>child-component>
   div>
   

三、组件的 props

1. 什么是 props？

   Props 是父组件用来向子组件传递数据的一种方式。子组件通过 props 选项声明它期望接收的数据。

2. 使用 props

   在子组件中，可以通过 this.propsName 来访问传递进来的 prop 值。

   Vue.component('child',