【Vue知识体系总结 4】Vue组件化开发

太过爱你忘了你带给我的痛 2021-09-09 03:24 381阅读 0赞

## 一、函数式编程 ##

### 1、函数式编程简介 ###

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

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

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

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

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

### 2、代码实例 ###

<!DOCTYPE html>
    <html lang="en">
    <head>
      <meta charset="UTF-8">
      <title>Title</title>
    </head>
    <body>
    <div id="app">
      {
       {totalPrice()}}
    </div>
     
    <script src="../js/vue.js"></script>
    <script>
      const app = new Vue({
        el: '#app',
        data: {
          message: '你好'
        },
        methods :{
          totalPrice(){
            const nums = [10,9,21,16,7]
            let total = nums.filter(x => x<10).map(x => x*2).reduce((pre,n)=>pre+n);
            console.log(total)
            return total
          }
        }
      })
    </script>
    </body>
    </html>

## 二、v-model ##

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

### 1、v-model双向绑定 ###

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

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

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

<!DOCTYPE html>
    <html lang="en">
    <head>
      <meta charset="UTF-8">
      <title>Title</title>
    </head>
    <body>
    <div id="app">
      
      <input type="text" :value="message" @input="message = $event.target.value">
      {
       {message}}
    </div>
     
    <script src="../js/vue.js"></script>
    <script>
      const app = new Vue({
        el: '#app',
        data: {
          message: '哪吒'
        },
        methods: {
          valueChange(event){
            this.message = event.target.value;
          }
        }
      })
    </script>
    </body>
    </html>

### 2、v-model和radio结合使用 ###

<!DOCTYPE html>
    <html lang="en">
    <head>
      <meta charset="UTF-8">
      <title>Title</title>
    </head>
    <body>
    <div id="app">
      <label for="male">
        
        <input type="radio"id="male" value="男" v-model="sex">男
        <input type="radio"id="female" value="女" v-model="sex">女
      </label>
      <h3>您选择的是：{
       {sex}}</h3>
    </div>
     
    <script src="../js/vue.js"></script>
    <script>
      const app = new Vue({
        el: '#app',
        data: {
          message: '你好',
          sex: '女'
        }
      })
    </script>
    </body>
    </html>

![2021072123391117.png][]

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

<!DOCTYPE html>
    <html lang="en">
    <head>
      <meta charset="UTF-8">
      <title>Title</title>
    </head>
    <body>
    <div id="app">
      
      <label for="license">
        <input type="checkbox"id="license" v-model="isAgree">同意协议
      </label>
      <h3>您选择的是：{
       {isAgree}}</h3>
      <button :disabled="!isAgree">下一步</button>
    </div>
     
    <script src="../js/vue.js"></script>
    <script>
      const app = new Vue({
        el: '#app',
        data: {
          message: '你好',
          isAgree: false
        }
      })
    </script>
    </body>
    </html>

![watermark_type_ZmFuZ3poZW5naGVpdGk_shadow_10_text_aHR0cHM6Ly9ibG9nLmNzZG4ubmV0L2d1b3J1aV9qYXZh_size_16_color_FFFFFF_t_70][]

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

<!DOCTYPE html>
    <html lang="en">
    <head>
      <meta charset="UTF-8">
      <title>Title</title>
    </head>
    <body>
    <div id="app">
      
      <input type="checkbox" value="比比东" v-model="girls">比比东
      <input type="checkbox" value="千仞雪" v-model="girls">千仞雪
      <input type="checkbox" value="美杜莎" v-model="girls">美杜莎
      <input type="checkbox" value="云韵" v-model="girls">云韵
      <input type="checkbox" value="雅妃" v-model="girls">雅妃
      <h3>您选择的是：{
       {girls}}</h3>
    </div>
     
    <script src="../js/vue.js"></script>
    <script>
      const app = new Vue({
        el: '#app',
        data: {
          message: '你好',
          girls: []
        }
      })
    </script>
    </body>
    </html>

![20210721234106837.png][]

### 5、v-model结合select使用 ###

<!DOCTYPE html>
    <html lang="en">
    <head>
      <meta charset="UTF-8">
      <title>Title</title>
    </head>
    <body>
    <div id="app">
      
      <select name="abc" v-model="girl">
        <option value="云韵">云韵</option>
        <option value="比比东">比比东</option>
        <option value="雅妃">雅妃</option>
        <option value="千仞雪">千仞雪</option>
        <option value="美杜莎">美杜莎</option>
      </select>
      <h3>您的选择是：{
       {girl}}</h3>
    </div>
     
    <script src="../js/vue.js"></script>
    <script>
      const app = new Vue({
        el: '#app',
        data: {
          message: '你好',
          girl: '云韵'
        }
      })
    </script>
    </body>
    </html>

![20210721234136352.png][]

### 6、v-for值绑定 ###

<!DOCTYPE html>
    <html lang="en">
    <head>
      <meta charset="UTF-8">
      <title>Title</title>
    </head>
    <body>
    <div id="app">
      <label v-for="item in beautyGirls" :for="item">
        <input type="checkbox" :value="item"
               :id="item" v-model="girls">{
       {item}}
      </label>
      <h3>您的选择是：{
       {girls}}</h3>
    </div>
     
    <script src="../js/vue.js"></script>
    <script>
      const app = new Vue({
        el: '#app',
        data: {
          message: '你好',
          girls: [],//多选框
          beautyGirls: ["云韵","比比东","雅妃","纳兰嫣然","美杜莎"]
        }
      })
    </script>
    </body>
    </html>

![20210721234224977.png][]

### 7、v-model修饰符的使用 ###

<!DOCTYPE html>
    <html lang="en">
    <head>
      <meta charset="UTF-8">
      <title>Title</title>
    </head>
    <body>
    <div id="app">
      
      <input type="text" v-model.lazy="message">
      <h2>{
       {message}}</h2>
     
      
      <input type="number" v-model.number="age">
      <h2>{
       {age}} --> {
       {typeof age}}</h2>
     
      
      <input type="text" v-model.trim="name">
      <h2>{
       {name}}</h2>
    </div>
     
    <script src="../js/vue.js"></script>
    <script>
      const app = new Vue({
        el: '#app',
        data: {
          message: '哪吒',
          age: 0,
          name: '哪吒'
        }
      })
    </script>
    </body>
    </html>

## 三、组件化开发 ##

组件是Vue.js中重要思想

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

组件化思想应用

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

### 1、全局组件 ###

<!DOCTYPE html>
    <html lang="en">
    <head>
      <meta charset="UTF-8">
      <title>Title</title>
    </head>
    <body>
    <div id="app">
      <my-cpn></my-cpn>
    </div>
     
    <script src="../js/vue.js"></script>
    <script>
     
      //1.创建组件化构造器对象
      const cpnC = Vue.extend({
        template: `
          <div>
            <h2>我是标题</h2>
            <p>我是CSDN哪吒</p>
          </div>
          `
      })
     
      //2.注册组件
      Vue.component('my-cpn',cpnC)
     
      const app = new Vue({
        el: '#app',
        data: {
          message: '你好'
        }
      })
    </script>
    </body>
    </html>

### 2、局部组件 ###

<!DOCTYPE html>
    <html lang="en">
    <head>
      <meta charset="UTF-8">
      <title>Title</title>
    </head>
    <body>
    <div id="app">
      <cpn></cpn>
    </div>
     
    <script src="../js/vue.js"></script>
    <script>
     
      //1.创建组件化构造器对象
      const cpnC = Vue.extend({
        template: `
          <div>
            <h2>我是标题</h2>
            <p>我是CSDN哪吒</p>
          </div>
          `
      })
     
      const app = new Vue({
        el: '#app',
        data: {
          message: '你好'
        },
        components: {
          cpn: cpnC
        }
      })
    </script>
    </body>
    </html>

![2021072123435438.png][]

### 3、父子组件 ###

<!DOCTYPE html>
    <html lang="en">
    <head>
      <meta charset="UTF-8">
      <title>Title</title>
    </head>
    <body>
    <div id="app">
      <cpn2></cpn2>
    </div>
     
    <script src="../js/vue.js"></script>
    <script>
     
      //1.创建组件化构造器对象
      const cpnC1 = Vue.extend({
        template: `
          <div>
            <h2>我是标题1</h2>
            <p>我是CSDN哪吒</p>
          </div>
          `
      })
     
      const cpnC2 = Vue.extend({
        template: `
          <div>
            <h2>我是标题2</h2>
            <p>我是博客专家</p>
            <cpn1></cpn1>
          </div>
          `,
        components: {
          cpn1: cpnC1
        }
      })
     
      const app = new Vue({
        el: '#app',
        data: {
          message: '你好'
        },
        components: {
          cpn2: cpnC2
        }
      })
    </script>
    </body>
    </html>

![watermark_type_ZmFuZ3poZW5naGVpdGk_shadow_10_text_aHR0cHM6Ly9ibG9nLmNzZG4ubmV0L2d1b3J1aV9qYXZh_size_16_color_FFFFFF_t_70 1][]

### 4、组件化语法糖写法 ###

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

<!DOCTYPE html>
    <html lang="en">
    <head>
      <meta charset="UTF-8">
      <title>Title</title>
    </head>
    <body>
    <div id="app">
      <my-cpn></my-cpn>
    </div>
     
    <script src="../js/vue.js"></script>
    <script>
      //注册组件语法糖写法
      Vue.component('my-cpn',{
        template: `
          <div>
            <h2>我是标题</h2>
            <p>我是CSDN哪吒</p>
          </div>
          `
      })
     
      const app = new Vue({
        el: '#app',
        data: {
          message: '你好'
        }
      })
    </script>
    </body>
    </html>

### 5、组件模板抽离写法 ###

<!DOCTYPE html>
    <html lang="en">
    <head>
      <meta charset="UTF-8">
      <title>Title</title>
    </head>
    <body>
     
    <div id="app">
      <cpn></cpn>
      <cpn></cpn>
      <cpn></cpn>
    </div>
     
    
    
    
    
    
    
    
     
    
    <template id="cpn">
      <div>
        <h2>我是标题</h2>
        <p>我是CSDN哪吒</p>
      </div>
    </template>
     
    <script src="../js/vue.js"></script>
    <script>
     
      // 1.注册一个全局组件
      Vue.component('cpn', {
        template: '#cpn'
      })
     
      const app = new Vue({
        el: '#app',
        data: {
          message: '你好啊'
        }
      })
    </script>
     
    </body>
    </html>

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

### 1、简介 ###

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

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

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

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

### 2、代码实例 ###

<!DOCTYPE html>
    <html lang="en">
    <head>
      <meta charset="UTF-8">
      <title>Title</title>
    </head>
    <body>
     
    <div id="app">
      <cpn></cpn>
    </div>
    <template id="cpn">
      <div>
        <h2>{
       {title}}</h2>
        <p>我是热门</p>
      </div>
    </template>
     
    <script src="../js/vue.js"></script>
    <script>
     
      // 1.注册一个全局组件
      Vue.component('cpn', {
        template: '#cpn',
        data() {
          return {
            title: '哪吒必胜'
          }
        }
      })
     
      const app = new Vue({
        el: '#app',
        data: {
          message: '你好',
          // title: '我是标题'
        }
      })
    </script>
     
    </body>
    </html>

### 3、效果展示  ###

![20210721234530265.png][]

## 五、父子组件通信 ##

### 1、父子组件通信简介 ###

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

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

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

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

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

通过props向子组件传递数据

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

![watermark_type_ZmFuZ3poZW5naGVpdGk_shadow_10_text_aHR0cHM6Ly9ibG9nLmNzZG4ubmV0L2d1b3J1aV9qYXZh_size_16_color_FFFFFF_t_70 2][]

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

props的值有两种方式：

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

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

### 2、父传子代码实例 ###

<!DOCTYPE html>
    <html lang="en">
    <head>
      <meta charset="UTF-8">
      <title>Title</title>
    </head>
    <body>
     
    <div id="app">
      
      
     
      <cpn :cmessage="message" :cgirls="girls"></cpn>
    </div>
     
    <template id="cpn">
      <div>
        <ul>
          <li v-for="item in cgirls">{
       {item}}</li>
        </ul>
        <h2>{
       {cmessage}}</h2>
      </div>
    </template>
     
    <script src="../js/vue.js"></script>
    <script>
      // 父传子: 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
        }
      })
    </script>
    </body>
    </html>

### 3、父传子效果展示  ###

![watermark_type_ZmFuZ3poZW5naGVpdGk_shadow_10_text_aHR0cHM6Ly9ibG9nLmNzZG4ubmV0L2d1b3J1aV9qYXZh_size_16_color_FFFFFF_t_70 3][]

### 4、props中的驼峰标识 ###

<!DOCTYPE html>
    <html lang="en">
    <head>
      <meta charset="UTF-8">
      <title>Title</title>
    </head>
    <body>
     
    <div id="app">
      <cpn :c-info="info" :child-my-message="message" v-bind:class></cpn>
    </div>
     
    <template id="cpn">
      <div>
        <h2>{
       {cInfo}}</h2>
        <h2>{
       {childMyMessage}}</h2>
      </div>
    </template>
     
    <script src="../js/vue.js"></script>
    <script>
      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
        }
      })
    </script>
     
    </body>
    </html>

效果展示

![20210721234659127.png][]

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

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

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

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

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

自定义事件的流程：

1.  在子组件中，通过$emit()来触发事件。
2.  在父组件中，通过v-on来监听子组件事件。

### 6、子传父代码实例 ###

<!DOCTYPE html>
    <html lang="en">
    <head>
      <meta charset="UTF-8">
      <title>Title</title>
    </head>
    <body>
     
    
    <div id="app">
      <cpn @item-click="cpnClick"></cpn>
    </div>
     
    
    <template id="cpn">
      <div>
        <button v-for="item in categories"
                @click="btnClick(item)">
          {
       {item.name}}
        </button>
      </div>
    </template>
     
    <script src="../js/vue.js"></script>
    <script>
     
      // 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);
          }
        }
      })
    </script>
     
    </body>
    </html>

### 7、子传父效果展示 ###

![202107212347385.png][]

上一篇：[【Vue知识体系总结 3】Vue常用标签][Vue_ 3_Vue]

下一篇：[【Vue基础知识总结 5】Vue实现树形结构][Vue_ 5_Vue]

本期特别推荐：[MySql知识体系总结（SQL优化篇）][MySql_SQL]

往期精彩内容：

[Java知识体系总结][Java]

[Spring框架总结][Spring]

[超详细的springBoot学习笔记][springBoot]

[常见数据结构与算法整理总结][Link 1]

[Java设计模式：23种设计模式全面解析][Java_23]

[Java面试题总结（附答案）][Java 1]

[MySql知识体系总结][MySql]

[Linux知识体系总结][Linux]

[Redis知识体系总结][Linux]

[2021072123391117.png]: /images/20210813/4bb23aebef6749608ea4e392ca301ba8.png
[watermark_type_ZmFuZ3poZW5naGVpdGk_shadow_10_text_aHR0cHM6Ly9ibG9nLmNzZG4ubmV0L2d1b3J1aV9qYXZh_size_16_color_FFFFFF_t_70]: /images/20210813/c04de393926b46ee9c8181672658fee7.png
[20210721234106837.png]: /images/20210813/36a3eccf86ec42bcbf6f93c2c3c003bf.png
[20210721234136352.png]: /images/20210813/eade77b0b79b461c99ca6532660e69ce.png
[20210721234224977.png]: /images/20210813/0e20348450304615a2e53f994e79df2e.png
[2021072123435438.png]: /images/20210813/5624f55eb32c4bdfa6d2ad5a496f781c.png
[watermark_type_ZmFuZ3poZW5naGVpdGk_shadow_10_text_aHR0cHM6Ly9ibG9nLmNzZG4ubmV0L2d1b3J1aV9qYXZh_size_16_color_FFFFFF_t_70 1]: /images/20210813/89ff0e214ed54fbba61ef3cb5cdd135a.png
[20210721234530265.png]: /images/20210813/2acedb65bdc344f7b60b5f54035310cf.png
[watermark_type_ZmFuZ3poZW5naGVpdGk_shadow_10_text_aHR0cHM6Ly9ibG9nLmNzZG4ubmV0L2d1b3J1aV9qYXZh_size_16_color_FFFFFF_t_70 2]: /images/20210813/1ba97f2f40cc486fa23cd0ffcdd3ea6e.png
[watermark_type_ZmFuZ3poZW5naGVpdGk_shadow_10_text_aHR0cHM6Ly9ibG9nLmNzZG4ubmV0L2d1b3J1aV9qYXZh_size_16_color_FFFFFF_t_70 3]: /images/20210813/7a2a318fb98c49a1bf84a8de17b0a775.png
[20210721234659127.png]: /images/20210813/afb5ce9e039f4e13bc78e976b0974c9f.png
[202107212347385.png]: /images/20210813/b834550838ea48efb58beb8e4f1785f3.png
[Vue_ 3_Vue]: https://blog.csdn.net/guorui_java/article/details/118830369
[Vue_ 5_Vue]: https://blog.csdn.net/guorui_java/article/details/107193357
[MySql_SQL]: https://blog.csdn.net/guorui_java/article/details/118633664
[Java]: https://blog.csdn.net/guorui_java/article/details/112391105
[Spring]: https://blog.csdn.net/guorui_java/article/details/104018528
[springBoot]: https://blog.csdn.net/guorui_java/article/details/104137262
[Link 1]: https://blog.csdn.net/guorui_java/article/details/106217472
[Java_23]: https://blog.csdn.net/guorui_java/article/details/104026988
[Java 1]: https://blog.csdn.net/guorui_java/article/details/107803283
[MySql]: https://blog.csdn.net/guorui_java/article/details/118558095
[Linux]: https://blog.csdn.net/guorui_java/article/details/117430091