Vue-基础语法（三）

组件化开发

一、组件概念
组件化规范：Web Components

浏览器支持不好,vue 实现了这个规范
https://developer.mozilla.org/zh-CN/docs/Web/Web_components

组件

  • 组件 (Component) 是 Vue.js 最强大的功能之一
  • 组件可以扩展 HTML 元素，封装可重用的代码

二、组件注册

1、全局注册

  • Vue.component('组件名称', { }) 第1个参数是标签名称，第2个参数是一个对象
  • 全局组件注册后，任何vue实例都可以用

2、组件基础用法

<div id="example">
    <!-- 2、 组件使用 是以HTML标签的形式使用  -->
    <my-component></my-component>
</div>
<script>
    //   注册组件 
    // 1、 my-component 就是组件中自定义的标签名
    Vue.component('my-component', {
        data:function(){
           return {
               msg:"hello world"
           }
        }，
        template: '<div>A custom component!</div>'
    })
    // 创建根实例
    new Vue({
        el: '#example'
    })
</script>

3、组件注意事项

1.组件参数的data值必须是函数（形成闭包环境，保证每个组件数据独立）同时这个函数要求返回一个对象
2.组件模板内只能有单个根元素（不能有两个根元素）
3.组件模板的内容可以是es6的模板字符串
4.组件可以重复使用多次，因为data中返回的是一个对象所以每个组件中的数据是私有的，即每个实例可以维护一份被返回对象的独立的拷贝
5.使用驼峰式命名组件('HelloWorld')，在使用组件的时候，在字符串模板中可以用驼峰的方式('HelloWorld')使用组件，但是在普通的标签模板中，必须使用短横线的方式('hello-world')使用组件

<div id="app">

    4、  组件可以重复使用多次 
         因为data中返回的是一个对象所以每个组件中的数据是私有的
         即每个实例可以维护一份被返回对象的独立的拷贝   

    <button-counter></button-counter>
    <button-counter></button-counter>
    <button-counter></button-counter>

    8、在非模板字符串中必须使用短横线的方式使用组件

    <hello-world></hello-world>
</div>

<script type="text/javascript">

    5、使用驼峰式命名组件('HelloWorld')，在使用组件的时候，在字符串模板中可以用驼峰的
       方式('HelloWorld')使用组件
       但是在普通的标签模板中，必须使用短横线的方式('hello-world')使用组件

    Vue.component('HelloWorld', {
        data: function() {
            return {
                msg: 'HelloWorld'
            }
        },
        template: '<div>{{msg}}</div>'
    });

    Vue.component('button-counter', {

        1、组件参数的data值必须是函数，同时这个函数要求返回一个对象  

        data: function() {
            return {
                count: 0
            }
        },

        2、组件模板必须是单个根元素
        3、组件模板的内容可以是模板字符串  

        template: `
                    <div>
                         <button @click="handle">点击了{{count}}次</button>
                         <button>测试123</button>

                         6、在字符串模板中可以使用驼峰的方式使用组件 

                         <HelloWorld></HelloWorld>
                    </div>
                 `,
        methods: {
            handle: function() {
                this.count += 2;
            }
        }
    })
    var vm = new Vue({
        el: '#app',
        data: {

        }
    });
</script>

4、局部注册（components）

  • 只能在当前注册它的vue实例中使用
<div id="app">
    <my-component></my-component>
</div>
<script>
    // 定义组件的模板
    var boy = {
        template: '<div>A custom component!</div>'
    }；
    var girl = {
        template: '<div>A custom component!</div>'
    }；
    new Vue({
        //局部注册组件  
        components: {
            // <my-component> 将只在父模板可用  一定要在实例上注册了才能在html文件中使用
            'boy-component': boy，
            'girl-component': girl
        }
    })
</script>

三、Vue 调试工具

四、Vue组件之间传值

1、父组件向子组件传值

  • 父组件发送的形式是以属性的形式绑定值到子组件身上。
  • 然后子组件用属性props接收
  • 在props中使用驼峰形式，模板中需要使用短横线的形式字符串形式的模板中没有这个限制
<div id="app">
    <div>{{pmsg}}</div>
    <!--1、menu-item  在 APP中嵌套着 故 menu-item   为  子组件      -->
    <!-- 给子组件传入一个静态的值 -->
    <menu-item title='来自父组件的值'></menu-item>
    <!-- 2、 需要动态的数据的时候 需要属性绑定的形式设置 此时 ptitle  来自父组件data 中的数据 . 
          传的值可以是数字、对象、数组等等
    -->
    <menu-item :title='ptitle' content='hello'></menu-item>
</div>
<script type="text/javascript">
    Vue.component('menu-item', {
        // 3、 子组件用属性props接收父组件传递过来的数据  
        props: ['title', 'content'],
        data: function() {
            return {
                msg: '子组件本身的数据'
            }
        },
        template: '<div>{{msg + "----" + title + "-----" + content}}</div>'
    });
    var vm = new Vue({
        el: '#app',
        data: {
            pmsg: '父组件中内容',
            ptitle: '动态绑定属性'
        }
    });
</script>

2、子组件向父组件传值

  • 子组件用$emit()触发事件
  • $emit() 第一个参数为 自定义的事件名称 第二个参数为需要传递的数据
  • 父组件用v-on 监听子组件的事件
<div id="app">
    <div :style='{fontSize: fontSize + "px"}'>{{pmsg}}</div>
    <!-- 
        2、 父组件用v-on 监听子组件的事件
            这里 enlarge-text  是从 $emit 中的第一个参数对应   handle 为对应的事件处理函数 
    -->
    <menu-item :parr='parr' @enlarge-text='handle($event)'></menu-item>
</div>
<script type="text/javascript" src="js/vue.js"></script>
<script type="text/javascript">
    // 子组件向父组件传值-携带参数
    Vue.component('menu-item', {
        props: ['parr'],
        template: `
        <div>
          <ul>
            <li :key='index' v-for='(item,index) in parr'>{{item}}</li>
          </ul>
            ###  1、子组件用$emit()触发事件
            ### 第一个参数为 自定义的事件名称   第二个参数为需要传递的数据  
          <button @click='$emit("enlarge-text", 5)'>扩大父组件中字体大小</button>
          <button @click='$emit("enlarge-text", 10)'>扩大父组件中字体大小</button>
        </div>
      `
    });
    var vm = new Vue({
        el: '#app',
        data: {
            pmsg: '父组件中内容',
            parr: ['apple', 'orange', 'banana'],
            fontSize: 10
        },
        methods: {
            handle: function(val) {
                // 扩大字体大小
                this.fontSize += val;
            }
        }
    });
</script>

3、兄弟之间的传递

  • 兄弟之间传递数据需要借助于事件中心，通过事件中心传递数据
    • 提供事件中心 var hub = new Vue()
  • 传递数据方，通过一个事件触发hub.$emit(方法名，传递的数据)
  • 接收数据方，通过mounted(){} 钩子中 触发hub.$on()方法名
  • 销毁事件 通过hub.$off()方法名销毁之后无法进行传递数据
<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">
    // 兄弟组件之间数据传递
    //1、 提供事件中心
    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() {
                //2、传递数据方，通过一个事件触发hub.$emit(方法名，传递的数据)   触发兄弟组件的事件
                hub.$emit('jerry-event', 2);
            }
        },
        mounted: function() {
            // 3、接收数据方，通过mounted(){} 钩子中  触发hub.$on(方法名
            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() {
                //2、传递数据方，通过一个事件触发hub.$emit(方法名，传递的数据)   触发兄弟组件的事件
                hub.$emit('tom-event', 1);
            }
        },
        mounted: function() {
            // 3、接收数据方，通过mounted(){} 钩子中  触发hub.$on()方法名
            hub.$on('jerry-event', (val) => {
                this.num += val;
            });
        }
    });
    var vm = new Vue({
        el: '#app',
        data: {
        },
        methods: {
            handle: function() {
                //4、销毁事件 通过hub.$off()方法名销毁之后无法进行传递数据  
                hub.$off('tom-event');
                hub.$off('jerry-event');
            }
        }
    });
</script>

四、组件插槽

  • 组件的最大特性就是复用性，而用好插槽能大大提高组件的可复用能力

4.1、匿名插槽

 <div id="app">
    <!-- 这里的所有组件标签中嵌套的内容会替换掉slot  如果不传值 则使用 slot 中的默认值  -->
    <alert-box>有bug发生</alert-box>
    <alert-box>有一个警告</alert-box>
    <alert-box></alert-box>
</div>
<script type="text/javascript">
    /*
              组件插槽：父组件向子组件传递内容
            */
    Vue.component('alert-box', {
        template: `
        <div>
          <strong>ERROR:</strong>
        # 当组件渲染的时候，这个 <slot> 元素将会被替换为“组件标签中嵌套的内容”。
        # 插槽内可以包含任何模板代码，包括 HTML
          <slot>默认内容</slot>
        </div>
      `
    });
    var vm = new Vue({
        el: '#app',
        data: {
        }
    });
</script>

4.2、具名插槽

  • 具有名字的插槽
  • 使用 <slot> 中的 "name" 属性绑定元素
<div id="app">
    <base-layout>
        <!-- 
            2、 通过slot属性来指定, 这个slot的值必须和下面slot组件得name值对应上
                如果没有匹配到 则放到匿名的插槽中   
        -->
        <p slot='header'>标题信息</p>
        <p>主要内容1</p>
        <p>主要内容2</p>
        <p slot='footer'>底部信息信息</p>
    </base-layout>
    <base-layout>
        <!-- 注意点：template临时的包裹标签最终不会渲染到页面上     -->
        <template slot='header'>
        <p>标题信息1</p>
        <p>标题信息2</p>
      </template>
        <p>主要内容1</p>
        <p>主要内容2</p>
        <template slot='footer'>
        <p>底部信息信息1</p>
        <p>底部信息信息2</p>
      </template>
    </base-layout>
</div>
<script type="text/javascript" src="js/vue.js"></script>
<script type="text/javascript">
    // 具名插槽
    Vue.component('base-layout', {
        template: `
        <div>
          <header>
            ### 1、 使用 <slot> 中的 "name" 属性绑定元素 指定当前插槽的名字
            <slot name='header'></slot>
          </header>
          <main>
            <slot></slot>
          </main>
          <footer>
            ###  注意点： 
            ###  具名插槽的渲染顺序，完全取决于模板，而不是取决于父组件中元素的顺序
            <slot name='footer'></slot>
          </footer>
        </div>
      `
    });
    var vm = new Vue({
        el: '#app',
        data: {
        }
    });
</script>

4.3、作用域插槽

  • 父组件对子组件加工处理
  • 既可以复用子组件的slot，又可以使slot内容不一致
<div id="app">
    <!-- 
        1、当我们希望li 的样式由外部使用组件的地方定义，因为可能有多种地方要使用该组件，
        但样式希望不一样 这个时候我们需要使用作用域插槽 
    -->
    <fruit-list :list='list'>
        <!-- 
            2、 父组件中使用了<template>元素,而且包含scope="slotProps",
            slotProps在这里只是临时变量   
        --->
        <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'>
            ###  3、 在子组件模板中,<slot>元素上有一个类似props传递数据给组件的写法msg="xxx",
            ###   插槽可以提供一个默认内容，如果如果父组件没有为这个插槽提供了内容，会显示默认的内容。
                    如果父组件为这个插槽提供了内容，则默认的内容会被替换掉
            <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>
最后编辑于 ：
©著作权归作者所有,转载或内容合作请联系作者
  • 人面猴
    序言：七十年代末，一起剥皮案震惊了整个滨河市，随后出现的几起案子，更是在滨河造成了极大的恐慌，老刑警刘岩，带你破解...
    沈念sama阅读 211,884评论 6赞 492
  • 死咒
    序言：滨河连续发生了三起死亡事件，死亡现场离奇诡异，居然都是意外死亡，警方通过查阅死者的电脑和手机，发现死者居然都...
    沈念sama阅读 90,347评论 3赞 385
  • 救了他两次的神仙让他今天三更去死
    文/潘晓璐 我一进店门，熙熙楼的掌柜王于贵愁眉苦脸地迎上来，“玉大人，你说我怎么就摊上这事。” “怎么了？”我有些...
    开封第一讲书人阅读 157,435评论 0赞 348
  • 道士缉凶录：失踪的卖姜人
    文/不坏的土叔 我叫张陵，是天一观的道长。 经常有香客问我，道长，这世上最难降的妖魔是什么？ 我笑而不...
    开封第一讲书人阅读 56,509评论 1赞 284
  • 港岛之恋（遗憾婚礼）
    正文 为了忘掉前任，我火速办了婚礼，结果婚礼上，老公的妹妹穿的比我还像新娘。我一直安慰自己，他们只是感情好，可当我...
    茶点故事阅读 65,611评论 6赞 386
  • 恶毒庶女顶嫁案：这布局不是一般人想出来的
    文/花漫 我一把揭开白布。 她就那样静静地躺着，像睡着了一般。 火红的嫁衣衬着肌肤如雪。 梳的纹丝不乱的头发上，一...
    开封第一讲书人阅读 49,837评论 1赞 290
  • 城市分裂传说
    那天，我揣着相机与录音，去河边找鬼。 笑死，一个胖子当着我的面吹牛，可吹牛的内容都是我干的。 我是一名探鬼主播，决...
    沈念sama阅读 38,987评论 3赞 408
  • 双鸳鸯连环套：你想象不到人心有多黑
    文/苍兰香墨 我猛地睁开眼，长吁一口气：“原来是场噩梦啊……” “哼！你这毒妇竟也来了？” 一声冷哼从身侧响起，我...
    开封第一讲书人阅读 37,730评论 0赞 267
  • 万荣杀人案实录
    序言：老挝万荣一对情侣失踪，失踪者是张志新（化名）和其女友刘颖，没想到半个月后，有当地人在树林里发现了一具尸体，经...
    沈念sama阅读 44,194评论 1赞 303
  • 护林员之死
    正文 独居荒郊野岭守林人离奇死亡，尸身上长有42处带血的脓包…… 初始之章·张勋 以下内容为张勋视角 年9月15日...
    茶点故事阅读 36,525评论 2赞 327
  • 白月光启示录
    正文 我和宋清朗相恋三年，在试婚纱的时候发现自己被绿了。 大学时的朋友给我发了我未婚夫和他白月光在一起吃饭的照片。...
    茶点故事阅读 38,664评论 1赞 340
  • 活死人
    序言：一个原本活蹦乱跳的男人离奇死亡，死状恐怖，灵堂内的尸体忽然破棺而出，到底是诈尸还是另有隐情，我是刑警宁泽，带...
    沈念sama阅读 34,334评论 4赞 330
  • 日本核电站爆炸内幕
    正文 年R本政府宣布，位于F岛的核电站，受9级特大地震影响，放射性物质发生泄漏。R本人自食恶果不足惜，却给世界环境...
    茶点故事阅读 39,944评论 3赞 313
  • 男人毒药：我在死后第九天来索命
    文/蒙蒙 一、第九天 我趴在偏房一处隐蔽的房顶上张望。 院中可真热闹，春花似锦、人声如沸。这庄子的主人今日做“春日...
    开封第一讲书人阅读 30,764评论 0赞 21
  • 一桩弑父案，背后竟有这般阴谋
    文/苍兰香墨 我抬头看了看天上的太阳。三九已至，却和暖如春，着一层夹袄步出监牢的瞬间，已是汗流浃背。 一阵脚步声响...
    开封第一讲书人阅读 31,997评论 1赞 266
  • 情欲美人皮
    我被黑心中介骗来泰国打工， 没想到刚下飞机就差点儿被人妖公主榨干…… 1. 我叫王不留，地道东北人。 一个月前我还...
    沈念sama阅读 46,389评论 2赞 360
  • 代替公主和亲
    正文 我出身青楼，却偏偏与公主长得像，于是被迫代替她去往敌国和亲。 传闻我的和亲对象是个残疾皇子，可洞房花烛夜当晚...
    茶点故事阅读 43,554评论 2赞 349