Vue 组件化开发

组件化开发思想
  • 现实中的组件化思想体现



    (1)标准
    (2)分治
    (3)重用
    (4)组合

  • 编程中的组件化思想体现


组件注册
  • 全局组件注册语法



  • 组件用法


    单独使用

    重复使用
  • 组件注册注意事项
    (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>
©著作权归作者所有,转载或内容合作请联系作者
  • 序言:七十年代末,一起剥皮案震惊了整个滨河市,随后出现的几起案子,更是在滨河造成了极大的恐慌,老刑警刘岩,带你破解...
    沈念sama阅读 175,490评论 5 419
  • 序言:滨河连续发生了三起死亡事件,死亡现场离奇诡异,居然都是意外死亡,警方通过查阅死者的电脑和手机,发现死者居然都...
    沈念sama阅读 74,060评论 2 335
  • 文/潘晓璐 我一进店门,熙熙楼的掌柜王于贵愁眉苦脸地迎上来,“玉大人,你说我怎么就摊上这事。” “怎么了?”我有些...
    开封第一讲书人阅读 124,407评论 0 291
  • 文/不坏的土叔 我叫张陵,是天一观的道长。 经常有香客问我,道长,这世上最难降的妖魔是什么? 我笑而不...
    开封第一讲书人阅读 47,741评论 0 248
  • 正文 为了忘掉前任,我火速办了婚礼,结果婚礼上,老公的妹妹穿的比我还像新娘。我一直安慰自己,他们只是感情好,可当我...
    茶点故事阅读 56,543评论 3 329
  • 文/花漫 我一把揭开白布。 她就那样静静地躺着,像睡着了一般。 火红的嫁衣衬着肌肤如雪。 梳的纹丝不乱的头发上,一...
    开封第一讲书人阅读 43,040评论 1 246
  • 那天,我揣着相机与录音,去河边找鬼。 笑死,一个胖子当着我的面吹牛,可吹牛的内容都是我干的。 我是一名探鬼主播,决...
    沈念sama阅读 34,107评论 3 358
  • 文/苍兰香墨 我猛地睁开眼,长吁一口气:“原来是场噩梦啊……” “哼!你这毒妇竟也来了?” 一声冷哼从身侧响起,我...
    开封第一讲书人阅读 32,646评论 0 229
  • 序言:老挝万荣一对情侣失踪,失踪者是张志新(化名)和其女友刘颖,没想到半个月后,有当地人在树林里发现了一具尸体,经...
    沈念sama阅读 36,694评论 1 271
  • 正文 独居荒郊野岭守林人离奇死亡,尸身上长有42处带血的脓包…… 初始之章·张勋 以下内容为张勋视角 年9月15日...
    茶点故事阅读 32,398评论 2 279
  • 正文 我和宋清朗相恋三年,在试婚纱的时候发现自己被绿了。 大学时的朋友给我发了我未婚夫和他白月光在一起吃饭的照片。...
    茶点故事阅读 33,987评论 1 288
  • 序言:一个原本活蹦乱跳的男人离奇死亡,死状恐怖,灵堂内的尸体忽然破棺而出,到底是诈尸还是另有隐情,我是刑警宁泽,带...
    沈念sama阅读 30,097评论 3 285
  • 正文 年R本政府宣布,位于F岛的核电站,受9级特大地震影响,放射性物质发生泄漏。R本人自食恶果不足惜,却给世界环境...
    茶点故事阅读 35,298评论 3 282
  • 文/蒙蒙 一、第九天 我趴在偏房一处隐蔽的房顶上张望。 院中可真热闹,春花似锦、人声如沸。这庄子的主人今日做“春日...
    开封第一讲书人阅读 27,278评论 0 14
  • 文/苍兰香墨 我抬头看了看天上的太阳。三九已至,却和暖如春,着一层夹袄步出监牢的瞬间,已是汗流浃背。 一阵脚步声响...
    开封第一讲书人阅读 28,413评论 1 232
  • 我被黑心中介骗来泰国打工, 没想到刚下飞机就差点儿被人妖公主榨干…… 1. 我叫王不留,地道东北人。 一个月前我还...
    沈念sama阅读 38,397评论 2 309
  • 正文 我出身青楼,却偏偏与公主长得像,于是被迫代替她去往敌国和亲。 传闻我的和亲对象是个残疾皇子,可洞房花烛夜当晚...
    茶点故事阅读 38,099评论 2 314