Vue.js组件：深入理解与实践

组件

代码复用一直是软件开发中长期存在的一个问题，每个开发者都想再次使用之前写好的代码，又担心引入这段代码后对现有的程序产生影响。从jQuery开始，我们就开始通过插件的形式复用代码，到Requirejs开始将js文件模块化，按需加载。这两种方式都提供了比较方便的复用方式，但往往还需要自己手动加入所需的CSS文件和HTML模块。

现在，Web Components的出现提供了一种新的思路，可以自定义tag标签，并拥有自身的模板、样式和交互。Angularjs的指令，Reactjs的组件化都在往这方面做尝试。同样，Vue.js也提供了自己的组件系统，支持自定义tag和原生HTML元素的扩展。

全局注册

全局注册需要确保在根实例初始化之前注册，这样才能使组件在任意实例中被使用，注册方式如下：

Vue.component('my-component', MyComponent);

这条语句需要写在var vm = new Vue({…})之前，注册成功之后，就可以在模块中以自定义元素<my-component>的形式使用组件。对于组件的命名，W3C规范是字母小写且包含一个短横杠“-”，Vue.js暂不强制要求，但官方建议遵循这个规则比较好。

件Props

选项props是组件中非常重要的一个选项，起到了父子组件间桥梁的作用。

首先，需要明确的是，组件实例的作用域是孤立的，也就是说子组件的模板和模块中是无法直接调用父组件的数据，所以通过props将父组件的数据传递给子组件，子组件在接受数据时需要显式声明props，例如：

Vue.component('my-child', {

　props : ['parent'],

　template: '<p>{{ parent }} is from parent'

})

<my-child parent="This data"></my-child>　//-> <p>This data is from parent </p>

这就是props的基本使用方法，另外还有几点细节会进行详细说明。

【B站推荐】Vue全套视频教程，从vue2.0到vue3.0一套全覆盖，前端必会的框架教程包含4套优质VUE练手项目，从零开始入门到精通，一套搞定。_哔哩哔哩_bilibili