Vue基础知识总结之vue组件化开发

本篇文章给大家带来了关于vue其中主要介绍了关于vue组件化开发的相关问题，组件化开发提供了一种抽象, 我们可以开发出一个独立可复用的小组件来构造我们的应用组件，下面一起来看一下，希望对大家有帮助。

【相关推荐：vue、vue】

一、函数式编程

1、函数式编程简介

函数式编程是种编程方式，它将电脑运算视为函数的计算。函数编程语言最重要的基础是λ演算（lambda calculus），而且λ演算的函数可以接受函数当作输入（参数）和输出（返回值）。

和指令式编程相比，函数式编程强调函数的计算比指令的执行重要。

立即学习“前端免费学习笔记（深入）”；

和过程化编程相比，函数式编程里函数的计算可随时调用。

filter函数自动过滤对象的所有元素，返回true才会存入指定对象；

Reduce函数对数组内部的所有元素进行汇总；

2、代码实例

    
  {{totalPrice()}}
   const app = new Vue({    el: '#app',    data: {      message: '你好'    },    methods :{      totalPrice(){        const nums = [10,9,21,16,7]        let total = nums.filter(x => x x*2).reduce((pre,n)=>pre+n);        console.log(total)        return total      }    }  })

登录后复制

二、v-model

vue中经常使用到和这类表单元素，vue对于这些元素的数据绑定和我们以前经常用的jQuery有些区别。vue使用v-model实现这些标签数据的双向绑定，它会根据控件类型自动选取正确的方法来更新元素。

1、v-model双向绑定

登录后复制

v-model动态双向绑定实现原理，本质上包含两个操作：

（1）v-bind绑定一个value属性

（2）v-on指令给当前元素绑定input事件

    
  <!--     -->    {{message}}
   const app = new Vue({    el: '#app',    data: {      message: '哪吒'    },    methods: {      valueChange(event){        this.message = event.target.value;      }    }  })

登录后复制

2、v-model和radio结合使用

    
      <!-- 男    女 -->    男    女    
您选择的是：{{sex}}
   const app = new Vue({    el: '#app',    data: {      message: '你好',      sex: '女'    }  })

登录后复制

3、v-model和CheckBox单选框结合使用

    
        同意协议    
您选择的是：{{isAgree}}
  下一步
   const app = new Vue({    el: '#app',    data: {      message: '你好',      isAgree: false    }  })

登录后复制

4、v-model和CheckBox多选框结合使用

    
    比比东  千仞雪  美杜莎  云韵  雅妃  
您选择的是：{{girls}}
   const app = new Vue({    el: '#app',    data: {      message: '你好',      girls: []    }  })

登录后复制

5、v-model结合select使用

    
        云韵    比比东    雅妃    千仞雪    美杜莎    
您的选择是：{{girl}}
   const app = new Vue({    el: '#app',    data: {      message: '你好',      girl: '云韵'    }  })

登录后复制

6、v-for值绑定

    
      {{item}}    
您的选择是：{{girls}}
   const app = new Vue({    el: '#app',    data: {      message: '你好',      girls: [],//多选框      beautyGirls: ["云韵","比比东","雅妃","纳兰嫣然","美杜莎"]    }  })

登录后复制

7、v-model修饰符的使用

    
      
{{message}}
       
{{age}} --> {{typeof age}}
       
{{name}}
   const app = new Vue({    el: '#app',    data: {      message: '哪吒',      age: 0,      name: '哪吒'    }  })

登录后复制

三、组件化开发

组件是Vue.js中重要思想

它提供了一种抽象, 我们可以开发出一个独立可复用的小组件来构造我们的应用组件可以扩展 HTML 元素，封装可重用的代码组件系统让我们可以用独立可复用的小组件来构建大型应用，几乎任意类型的应用的界面都可以抽象为一个组件树

组件化思想应用 

有了组件化的思想, 我们之后开发中就要充分的利用它尽可能将页面拆分成一个个小的, 可复用的组件这样让我们代码更方便组织和管理, 并且扩展性也强

1、全局组件

    
  
    //1.创建组件化构造器对象  const cpnC = Vue.extend({    template: `      
        
我是标题
        
我是CSDN哪吒
      
      `  })   //2.注册组件  Vue.component('my-cpn',cpnC)   const app = new Vue({    el: '#app',    data: {      message: '你好'    }  })

登录后复制

2、局部组件

    
  
    //1.创建组件化构造器对象  const cpnC = Vue.extend({    template: `      
        
我是标题
        
我是CSDN哪吒
      
      `  })   const app = new Vue({    el: '#app',    data: {      message: '你好'    },    components: {      cpn: cpnC    }  })

登录后复制

3、父子组件

    
  
    //1.创建组件化构造器对象  const cpnC1 = Vue.extend({    template: `      
        
我是标题1
        
我是CSDN哪吒
      
      `  })   const cpnC2 = Vue.extend({    template: `      
        
我是标题2
        
我是博客专家
              
      `,    components: {      cpn1: cpnC1    }  })   const app = new Vue({    el: '#app',    data: {      message: '你好'    },    components: {      cpn2: cpnC2    }  })

登录后复制

4、组件化语法糖写法

vue为了简化注册组件的过程，提供了语法糖的写法，主要是省去了调用Vue.extend()的步骤，直接使用一个对象替代。

    
  
   //注册组件语法糖写法  Vue.component('my-cpn',{    template: `      
        
我是标题
        
我是CSDN哪吒
      
      `  })   const app = new Vue({    el: '#app',    data: {      message: '你好'    }  })

登录后复制

5、组件模板抽离写法

     
      
 <!----><!--
--><!--
我是标题
--><!--
我是CSDN哪吒
--><!--
--><!---->   
    
我是标题
    
我是CSDN哪吒
  
    // 1.注册一个全局组件  Vue.component('cpn', {    template: '#cpn'  })   const app = new Vue({    el: '#app',    data: {      message: '你好啊'    }  }) 

登录后复制

四、组件可以访问Vue实例数据吗？

1、简介

实验发现，组件不能访问Vue实例数据，而且即便可以访问，如果将所有的数据都放在Vue实例中，Vue实例就会变得非常臃肿。

Vue组件应该有自己保存数据的地方。

组件自己的数据存放在哪里？

组件对象也有一个data属性（也有method等属性）；只是这个data属性必须是一个函数；而且这个函数返回一个对象，对象内部保存着数据；

2、代码实例

     
  
  
    
{{title}}
    
我是热门
  
    // 1.注册一个全局组件  Vue.component('cpn', {    template: '#cpn',    data() {      return {        title: '哪吒必胜'      }    }  })   const app = new Vue({    el: '#app',    data: {      message: '你好',      // title: '我是标题'    }  }) 

登录后复制

3、效果展示 

五、父子组件通信

1、父子组件通信简介

在开发中，往往一些数据确实需要从上层传递到下层：

比如在一个页面中，我们从服务器请求到了很多的数据。

其中一部分数据，并非是我们整个页面的大组件来展示的，而是需要下面的子组件进行展示。

这个时候，并不会让子组件再次发送一个网络请求，而是直接让大组件(父组件)将数据传递给小组件(子组件)。

如何进行父子组件间的通信呢？Vue官方提到：

通过props向子组件传递数据

通过事件向父组件发送消息

在组件中，使用选项props来声明需要从父级接收到的数据。

props的值有两种方式：

方式一：字符串数组，数组中的字符串就是传递时的名称。

方式二：对象，对象可以设置传递时的类型，也可以设置默认值等。

2、父传子代码实例

     
  <!---->  <!---->   
   
    
      
{{item}}
    
    
{{cmessage}}
  
   // 父传子: props  const cpn = {    template: '#cpn',    // props: ['cgirls', 'cmessage'],    props: {      // 1.类型限制      // cgirls: Array,      // cmessage: String,       // 2.提供一些默认值, 以及必传值      cmessage: {        type: String,        default: 'aaaaaaaa',        required: true      },      // 类型是对象或者数组时, 默认值必须是一个函数      cgirls: {        type: Array,        default() {          return []        }      }    },    data() {      return {}    },    methods: {     }  }   const app = new Vue({    el: '#app',    data: {      message: 'CSDN哪吒',      girls: ['云韵', '比比东', '雅妃']    },    components: {      cpn    }  })

登录后复制

3、父传子效果展示 

4、props中的驼峰标识

     
  
   
    
{{cInfo}}
    
{{childMyMessage}}
  
   const cpn = {    template: '#cpn',    props: {      cInfo: {        type: Object,        default() {          return {}        }      },      childMyMessage: {        type: String,        default: ''      }    }  }   const app = new Vue({    el: '#app',    data: {      info: {        name: '哪吒',        age: 18,        height: 1.88      },      message: 'csdn博客专家'    },    components: {      cpn    }  }) 

登录后复制

效果展示 

5、子传父（自定义事件方式）

自定义事件方式完成子传父。

什么时候需要自定义事件呢？

当子组件需要向父组件传递数据时，就要用到自定义事件了。

我们之前学习的v-on不仅仅可以用于监听DOM事件，也可以用于组件间的自定义事件。

自定义事件的流程：

在子组件中，通过$emit()来触发事件。

在父组件中，通过v-on来监听子组件事件。

6、子传父代码实例

     
  
   
          {{item.name}}      
    // 1.子组件  const cpn = {    template: '#cpn',    data() {      return {        categories: [          {id: '1', name: '云韵'},          {id: '2', name: '比比东'},          {id: '3', name: '雅妃'},          {id: '4', name: '纳兰嫣然'},        ]      }    },    methods: {      btnClick(item) {        // 发射事件: 自定义事件        this.$emit('item-click', item)      }    }  }   // 2.父组件  const app = new Vue({    el: '#app',    data: {      message: 'csdn哪吒'    },    components: {      cpn    },    methods: {      cpnClick(item) {        console.log('cpnClick', item);      }    }  }) 

登录后复制

7、子传父效果展示

【相关推荐：vue、vue】

以上就是Vue基础知识总结之vue组件化开发的详细内容，更多请关注【创想鸟】其它相关文章！