本文共 1552 字，大约阅读时间需要 5 分钟。

组件化开发思想：基于Vue的实践指南

组件化规范：Web Components

Web Components 是构建用户界面的标准化组件化方法。其核心目标是最大限度地复用代码，减少重复工作。然而，自定义组件在 HTML、CSS 和 JavaScript 中的实现并不方便，多次使用组件可能导致命名冲突。Vue 提供了对 Web Components 的实现，简化了组件化开发。

组件注册

全局组件注册

全局组件注册是一种简单且直观的方式，适用于需要在整个应用中重用的组件。其语法如下：

Vue.component('button-counter', {
  data: function() {
    return { count: 0 };
  },
  template: '点击了{{ count }}次。'
});

组件用法

全局组件可以通过以下方式使用：

组件注册注意事项

局部组件注册

局部组件只能在其父组件中使用。注册方式如下：

var ComponentA = {
  data: function() {
    return { msg: 'HelloJerry' };
  },
  template: '
   
    {{ msg }}
   
'
};
new Vue({
  el: '#app',
  components: {
    'component-a': ComponentA
  }
});

Vue调试工具用法

可以通过百度找到相关工具的使用方法。

组件间数据交互

父组件向子组件传值

props: ['title']

props 属性值类型

支持 String、Number、Boolean、Array、Object 等类型。

子组件向父组件传值

通过自定义事件：

扩大字体

非父子组件间传值

使用事件中心：

var eventHub = new Vue();
eventHub.$on('add-todo', function(val) {});
eventHub.$emit('add-todo', val);

组件插槽

插槽作用

父组件向子组件传递内容，主要用于布局和内容展示。

具名插槽

定义：

Vue.component('base-layout', {
  template: `
    
   
      
    
     
    
      
    
     
    
      
    
    
   
  `
});

使用：

   
  
    
标题信息
  
    
主要内容1
  
    
主要内容2
  
    
底部信息信息
   

作用域插槽

在子组件中使用 slot-scope 属性：

基于组件的案例

需求分析

根据业务功能进行组件化划分：

功能实现步骤

转载地址：http://dgzsz.baihongyu.com/