Vue 组件化开发

组件化开发思想

现实中的组件化思想体现

（1）标准
（2）分治
（3）重用
（4）组合

编程中的组件化思想体现

组件化规范：Web Components
（1）我们希望尽可能多的重用代码
（2）自定义组件的方式不太容易（html、css和js）
（3）多次使用组件可能导致冲突

官网：https://developer.mozilla.org/zh-CN/docs/Web/Web_Components

组件注册

全局组件注册语法

组件用法

单独使用

重复使用

组件注册注意事项
（1）data必须是一个函数
         分析函数与普通对象的对比
（2）组件模板内容必须是单个跟元素
         分析演示实际的效果
（3）组件模板内容可以是模板字符串
         模板字符串需要浏览器提供支持（ES6语法）

（4）组件命名方式
         ① 短横线方式
         ② 驼峰方式

如果使用驼峰式命名组件，那么在使用组件的时候，只能在字符串模板中用驼峰的方式使用组件，但是在普通的标签模板中，必须使用短横线的方式使用组件。

局部组件注册
局部组件只能在注册他的父组件中使用。

组件间数据交互

父组件向子组件传值
（1）组件内部通过 props 接收传递过来的值

（2）父组件通过属性将值传递给子组件

（3）props属性名规则
         ① 在props中使用驼峰形式，模板中需要使用短横线的形式。
         ② 字符串形式的模板中没有这个限制。

（4）props属性值类型
         ① 字符串 String
         ② 数值 Number
         ③ 布尔值 Boolean
         ④ 数组 Array
         ⑤ 对象 Object

注意是否属性绑定

子组件向父组件传值（不带参数）
（1）子组件通过自定义事件向父组件传递信息

（2）父组件监听子组件的事件

子组件向父组件传值（携带参数）
（1）子组件通过自定义事件向父组件传递信息

（2）父组件监听子组件的事件

非父子组件间传值

（1）单独的事件中心管理组件间的通信
（2）监听事件与销毁事件
（3）触发事件

参考代码：

<!DOCTYPE html>
<html>

  <head>
      <meta charset="UTF-8">
      <title>兄弟组件之间数据交互</title>
  </head>

  <body>

      <div id="app">
          <div>父组件</div>
          <div>
              <button @click='handle'>销毁事件</button>
          </div>
          <test-tom></test-tom>
          <test-jerry></test-jerry>
      </div>

      <script type="text/javascript" src="js/vue.js"></script>
      <script type="text/javascript">
          // 提供事件中心
          var hub = new Vue();

          Vue.component('test-tom', {
              data: function() {
                  return {
                      num: 0
                  }
              },
              template: `
          <div>
            <div>TOM:{{num}}</div>
            <div>
              <button @click='handle'>点击</button>
            </div>
          </div>
        `,
              methods: {
                  handle: function() {
                      hub.$emit('jerry-event', 2);
                  }
              },
              mounted: function() {
                  // 监听事件
                  hub.$on('tom-event', (val) => {
                      this.num += val;
                  });
              }
          });
          Vue.component('test-jerry', {
              data: function() {
                  return {
                      num: 0
                  }
              },
              template: `
          <div>
            <div>JERRY:{{num}}</div>
            <div>
              <button @click='handle'>点击</button>
            </div>
          </div>
        `,
              methods: {
                  handle: function() {
                      // 触发兄弟组件的事件
                      hub.$emit('tom-event', 1);
                  }
              },
              mounted: function() {
                  // 监听事件
                  hub.$on('jerry-event', (val) => {
                      this.num += val;
                  });
              }
          });
          var vm = new Vue({
              el: '#app',
              data: {

              },
              methods: {
                  handle: function() {
                      hub.$off('tom-event');
                      hub.$off('jerry-event');
                  }
              }
          });
      </script>

  </body>

</html>

组件插槽

组件插槽的作用
父组件向子组件传递内容。

组件插槽基本用法
（1）插槽位置

（2）插槽内容

具名插槽用法
（1）插槽定义

（2）插槽内容

作用域插槽
应用场景：父组件对子组件的内容进行加工处理。
（1）插槽定义

（2）插槽内容

参考代码：

<!DOCTYPE html>
<html>

  <head>
      <meta charset="UTF-8">
      <title>作用域插槽用法</title>
  </head>

  <style>
      .current {
          color: orange;
      }
  </style>

  <body>

      <div id="app">
          <fruit-list :list='list'>
              <template slot-scope='slotProps'>
                  <strong v-if='slotProps.info.id==3' class="current">{{slotProps.info.name}}</strong>
                  <span v-else>{{slotProps.info.name}}</span>
              </template>
          </fruit-list>
      </div>

      <script type="text/javascript" src="js/vue.js"></script>
      <script type="text/javascript">
          Vue.component('fruit-list', {
              props: ['list'],
              template: `
       <div>
         <li :key='item.id' v-for='item in list'>
           <slot :info='item'>{{item.name}}</slot>
         </li>
       </div>
     `
          });
          var vm = new Vue({
              el: '#app',
              data: {
                  list: [{
                      id: 1,
                      name: 'apple'
                  }, {
                      id: 2,
                      name: 'orange'
                  }, {
                      id: 3,
                      name: 'banana'
                  }]
              }
          });
      </script>

  </body>

</html>