組件化開發(fā)

一、組件概念
組件化規(guī)范：Web Components

瀏覽器支持不好,vue 實(shí)現(xiàn)了這個(gè)規(guī)范
https://developer.mozilla.org/zh-CN/docs/Web/Web_components

組件

組件 (Component) 是 Vue.js 最強(qiáng)大的功能之一
組件可以擴(kuò)展 HTML 元素，封裝可重用的代碼

二、組件注冊(cè)

1、全局注冊(cè)

Vue.component('組件名稱', { }) 第1個(gè)參數(shù)是標(biāo)簽名稱，第2個(gè)參數(shù)是一個(gè)對(duì)象
全局組件注冊(cè)后，任何vue實(shí)例都可以用

2、組件基礎(chǔ)用法

<div id="example">
    <!-- 2、 組件使用 是以HTML標(biāo)簽的形式使用  -->
    <my-component></my-component>
</div>
<script>
    //   注冊(cè)組件 
    // 1、 my-component 就是組件中自定義的標(biāo)簽名
    Vue.component('my-component', {
        data:function(){
           return {
               msg:"hello world"
           }
        }，
        template: '<div>A custom component!</div>'
    })
    // 創(chuàng)建根實(shí)例
    new Vue({
        el: '#example'
    })
</script>

3、組件注意事項(xiàng)

1.組件參數(shù)的data值必須是函數(shù)（形成閉包環(huán)境，保證每個(gè)組件數(shù)據(jù)獨(dú)立）同時(shí)這個(gè)函數(shù)要求返回一個(gè)對(duì)象
2.組件模板內(nèi)只能有單個(gè)根元素（不能有兩個(gè)根元素）
3.組件模板的內(nèi)容可以是es6的模板字符串
4.組件可以重復(fù)使用多次，因?yàn)閐ata中返回的是一個(gè)對(duì)象所以每個(gè)組件中的數(shù)據(jù)是私有的，即每個(gè)實(shí)例可以維護(hù)一份被返回對(duì)象的獨(dú)立的拷貝
5.使用駝峰式命名組件('HelloWorld')，在使用組件的時(shí)候，在字符串模板中可以用駝峰的方式('HelloWorld')使用組件，但是在普通的標(biāo)簽?zāi)０逯校仨毷褂枚虣M線的方式('hello-world')使用組件

<div id="app">

    4、  組件可以重復(fù)使用多次 
         因?yàn)閐ata中返回的是一個(gè)對(duì)象所以每個(gè)組件中的數(shù)據(jù)是私有的
         即每個(gè)實(shí)例可以維護(hù)一份被返回對(duì)象的獨(dú)立的拷貝   

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

    8、在非模板字符串中必須使用短橫線的方式使用組件

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

<script type="text/javascript">

    5、使用駝峰式命名組件('HelloWorld')，在使用組件的時(shí)候，在字符串模板中可以用駝峰的
       方式('HelloWorld')使用組件
       但是在普通的標(biāo)簽?zāi)０逯?，必須使用短橫線的方式('hello-world')使用組件

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

    Vue.component('button-counter', {

        1、組件參數(shù)的data值必須是函數(shù)，同時(shí)這個(gè)函數(shù)要求返回一個(gè)對(duì)象  

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

        2、組件模板必須是單個(gè)根元素
        3、組件模板的內(nèi)容可以是模板字符串  

        template: `
                    <div>
                         <button @click="handle">點(diǎn)擊了{(lán){count}}次</button>
                         <button>測試123</button>

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

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

        }
    });
</script>

4、局部注冊(cè)（components）

只能在當(dāng)前注冊(cè)它的vue實(shí)例中使用

<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({
        //局部注冊(cè)組件  
        components: {
            // <my-component> 將只在父模板可用  一定要在實(shí)例上注冊(cè)了才能在html文件中使用
            'boy-component': boy，
            'girl-component': girl
        }
    })
</script>

三、Vue 調(diào)試工具

四、Vue組件之間傳值

1、父組件向子組件傳值

父組件發(fā)送的形式是以屬性的形式綁定值到子組件身上。
然后子組件用屬性props接收
在props中使用駝峰形式，模板中需要使用短橫線的形式字符串形式的模板中沒有這個(gè)限制

<div id="app">
    <div>{{pmsg}}</div>
    <!--1、menu-item  在 APP中嵌套著 故 menu-item   為  子組件      -->
    <!-- 給子組件傳入一個(gè)靜態(tài)的值 -->
    <menu-item title='來自父組件的值'></menu-item>
    <!-- 2、 需要?jiǎng)討B(tài)的數(shù)據(jù)的時(shí)候 需要屬性綁定的形式設(shè)置 此時(shí) ptitle  來自父組件data 中的數(shù)據(jù) . 
          傳的值可以是數(shù)字、對(duì)象、數(shù)組等等
    -->
    <menu-item :title='ptitle' content='hello'></menu-item>
</div>
<script type="text/javascript">
    Vue.component('menu-item', {
        // 3、 子組件用屬性props接收父組件傳遞過來的數(shù)據(jù)  
        props: ['title', 'content'],
        data: function() {
            return {
                msg: '子組件本身的數(shù)據(jù)'
            }
        },
        template: '<div>{{msg + "----" + title + "-----" + content}}</div>'
    });
    var vm = new Vue({
        el: '#app',
        data: {
            pmsg: '父組件中內(nèi)容',
            ptitle: '動(dòng)態(tài)綁定屬性'
        }
    });
</script>

2、子組件向父組件傳值

子組件用$emit()觸發(fā)事件
$emit() 第一個(gè)參數(shù)為自定義的事件名稱第二個(gè)參數(shù)為需要傳遞的數(shù)據(jù)
父組件用v-on 監(jiān)聽子組件的事件

<div id="app">
    <div :style='{fontSize: fontSize + "px"}'>{{pmsg}}</div>
    <!-- 
        2、 父組件用v-on 監(jiān)聽子組件的事件
            這里 enlarge-text  是從 $emit 中的第一個(gè)參數(shù)對(duì)應(yīng)   handle 為對(duì)應(yīng)的事件處理函數(shù) 
    -->
    <menu-item :parr='parr' @enlarge-text='handle($event)'></menu-item>
</div>
<script type="text/javascript" src="js/vue.js"></script>
<script type="text/javascript">
    // 子組件向父組件傳值-攜帶參數(shù)
    Vue.component('menu-item', {
        props: ['parr'],
        template: `
        <div>
          <ul>
            <li :key='index' v-for='(item,index) in parr'>{{item}}</li>
          </ul>
            ###  1、子組件用$emit()觸發(fā)事件
            ### 第一個(gè)參數(shù)為 自定義的事件名稱   第二個(gè)參數(shù)為需要傳遞的數(shù)據(jù)  
          <button @click='$emit("enlarge-text", 5)'>擴(kuò)大父組件中字體大小</button>
          <button @click='$emit("enlarge-text", 10)'>擴(kuò)大父組件中字體大小</button>
        </div>
      `
    });
    var vm = new Vue({
        el: '#app',
        data: {
            pmsg: '父組件中內(nèi)容',
            parr: ['apple', 'orange', 'banana'],
            fontSize: 10
        },
        methods: {
            handle: function(val) {
                // 擴(kuò)大字體大小
                this.fontSize += val;
            }
        }
    });
</script>

3、兄弟之間的傳遞

兄弟之間傳遞數(shù)據(jù)需要借助于事件中心，通過事件中心傳遞數(shù)據(jù)
- 提供事件中心 var hub = new Vue()
傳遞數(shù)據(jù)方，通過一個(gè)事件觸發(fā)hub.$emit(方法名，傳遞的數(shù)據(jù))
接收數(shù)據(jù)方，通過mounted(){} 鉤子中觸發(fā)hub.$on()方法名
銷毀事件通過hub.$off()方法名銷毀之后無法進(jìn)行傳遞數(shù)據(jù)

<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">
    // 兄弟組件之間數(shù)據(jù)傳遞
    //1、 提供事件中心
    var hub = new Vue();
    Vue.component('test-tom', {
        data: function() {
            return {
                num: 0
            }
        },
        template: `
        <div>
          <div>TOM:{{num}}</div>
          <div>
            <button @click='handle'>點(diǎn)擊</button>
          </div>
        </div>
      `,
        methods: {
            handle: function() {
                //2、傳遞數(shù)據(jù)方，通過一個(gè)事件觸發(fā)hub.$emit(方法名，傳遞的數(shù)據(jù))   觸發(fā)兄弟組件的事件
                hub.$emit('jerry-event', 2);
            }
        },
        mounted: function() {
            // 3、接收數(shù)據(jù)方，通過mounted(){} 鉤子中  觸發(fā)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'>點(diǎn)擊</button>
          </div>
        </div>
      `,
        methods: {
            handle: function() {
                //2、傳遞數(shù)據(jù)方，通過一個(gè)事件觸發(fā)hub.$emit(方法名，傳遞的數(shù)據(jù))   觸發(fā)兄弟組件的事件
                hub.$emit('tom-event', 1);
            }
        },
        mounted: function() {
            // 3、接收數(shù)據(jù)方，通過mounted(){} 鉤子中  觸發(fā)hub.$on()方法名
            hub.$on('jerry-event', (val) => {
                this.num += val;
            });
        }
    });
    var vm = new Vue({
        el: '#app',
        data: {
        },
        methods: {
            handle: function() {
                //4、銷毀事件 通過hub.$off()方法名銷毀之后無法進(jìn)行傳遞數(shù)據(jù)  
                hub.$off('tom-event');
                hub.$off('jerry-event');
            }
        }
    });
</script>

四、組件插槽

組件的最大特性就是復(fù)用性，而用好插槽能大大提高組件的可復(fù)用能力

4.1、匿名插槽

 <div id="app">
    <!-- 這里的所有組件標(biāo)簽中嵌套的內(nèi)容會(huì)替換掉slot  如果不傳值 則使用 slot 中的默認(rèn)值  -->
    <alert-box>有bug發(fā)生</alert-box>
    <alert-box>有一個(gè)警告</alert-box>
    <alert-box></alert-box>
</div>
<script type="text/javascript">
    /*
              組件插槽：父組件向子組件傳遞內(nèi)容
            */
    Vue.component('alert-box', {
        template: `
        <div>
          <strong>ERROR:</strong>
        # 當(dāng)組件渲染的時(shí)候，這個(gè) <slot> 元素將會(huì)被替換為“組件標(biāo)簽中嵌套的內(nèi)容”。
        # 插槽內(nèi)可以包含任何模板代碼，包括 HTML
          <slot>默認(rèn)內(nèi)容</slot>
        </div>
      `
    });
    var vm = new Vue({
        el: '#app',
        data: {
        }
    });
</script>

4.2、具名插槽

具有名字的插槽
使用 <slot> 中的 "name" 屬性綁定元素

<div id="app">
    <base-layout>
        <!-- 
            2、 通過slot屬性來指定, 這個(gè)slot的值必須和下面slot組件得name值對(duì)應(yīng)上
                如果沒有匹配到 則放到匿名的插槽中   
        -->
        <p slot='header'>標(biāo)題信息</p>
        <p>主要內(nèi)容1</p>
        <p>主要內(nèi)容2</p>
        <p slot='footer'>底部信息信息</p>
    </base-layout>
    <base-layout>
        <!-- 注意點(diǎn)：template臨時(shí)的包裹標(biāo)簽最終不會(huì)渲染到頁面上     -->
        <template slot='header'>
        <p>標(biāo)題信息1</p>
        <p>標(biāo)題信息2</p>
      </template>
        <p>主要內(nèi)容1</p>
        <p>主要內(nèi)容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" 屬性綁定元素 指定當(dāng)前插槽的名字
            <slot name='header'></slot>
          </header>
          <main>
            <slot></slot>
          </main>
          <footer>
            ###  注意點(diǎn)： 
            ###  具名插槽的渲染順序，完全取決于模板，而不是取決于父組件中元素的順序
            <slot name='footer'></slot>
          </footer>
        </div>
      `
    });
    var vm = new Vue({
        el: '#app',
        data: {
        }
    });
</script>

4.3、作用域插槽

父組件對(duì)子組件加工處理
既可以復(fù)用子組件的slot，又可以使slot內(nèi)容不一致

<div id="app">
    <!-- 
        1、當(dāng)我們希望li 的樣式由外部使用組件的地方定義，因?yàn)榭赡苡卸喾N地方要使用該組件，
        但樣式希望不一樣 這個(gè)時(shí)候我們需要使用作用域插槽 
    -->
    <fruit-list :list='list'>
        <!-- 
            2、 父組件中使用了<template>元素,而且包含scope="slotProps",
            slotProps在這里只是臨時(shí)變量   
        --->
        <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>元素上有一個(gè)類似props傳遞數(shù)據(jù)給組件的寫法msg="xxx",
            ###   插槽可以提供一個(gè)默認(rèn)內(nèi)容，如果如果父組件沒有為這個(gè)插槽提供了內(nèi)容，會(huì)顯示默認(rèn)的內(nèi)容。
                    如果父組件為這個(gè)插槽提供了內(nèi)容，則默認(rèn)的內(nèi)容會(huì)被替換掉
            <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>

色偷偷精品伊人,欧洲久久精品,欧美综合婷婷骚逼,国产AV主播,国产最新探花在线,九色在线视频一区,伊人大交九欧美,1769亚洲,黄色成人av

Vue-基礎(chǔ)語法（三）

Vue-基礎(chǔ)語法（三）

組件化開發(fā)

二、組件注冊(cè)

1、全局注冊(cè)

2、組件基礎(chǔ)用法

3、組件注意事項(xiàng)

4、局部注冊(cè)（components）

三、Vue 調(diào)試工具

四、Vue組件之間傳值

1、父組件向子組件傳值

2、子組件向父組件傳值

3、兄弟之間的傳遞

四、組件插槽

4.1、匿名插槽

4.2、具名插槽

4.3、作用域插槽

友情鏈接更多精彩內(nèi)容

色偷偷精品伊人,欧洲久久精品,欧美综合婷婷骚逼,国产AV主播,国产最新探花在线,九色在线视频一区,伊人大交九 欧美,1769亚洲,黄色成人av

Vue-基礎(chǔ)語法（三）

組件化開發(fā)

二、組件注冊(cè)

1、全局注冊(cè)

2、組件基礎(chǔ)用法

3、組件注意事項(xiàng)

4、局部注冊(cè)（components）

三、Vue 調(diào)試工具

四、Vue組件之間傳值

1、父組件向子組件傳值

2、子組件向父組件傳值

3、兄弟之間的傳遞

四、組件插槽

4.1、匿名插槽

4.2、具名插槽

4.3、作用域插槽

友情鏈接更多精彩內(nèi)容

色偷偷精品伊人,欧洲久久精品,欧美综合婷婷骚逼,国产AV主播,国产最新探花在线,九色在线视频一区,伊人大交九欧美,1769亚洲,黄色成人av

1、全局注冊(cè)

2、組件基礎(chǔ)用法

3、組件注意事項(xiàng)

4、局部注冊(cè)（components）

四、Vue組件之間傳值

1、父組件向子組件傳值

2、子組件向父組件傳值

四、組件插槽

4.1、匿名插槽

4.2、具名插槽