目錄：

　　Vue組件系統之全局組件的註冊

　　Vue組件系統之組件的復用

　　Vue組價系統之局部組件的註冊

　　Vue組件系統之父子組件的通信

　　Vue組件系統之子父組件的通信

　　Vue組件系統之混入（mixin）

　　Vue組件系統之插槽<slot></slot>

　　Vue組件系統之具名插槽

Vue組件系統之全局組件的註冊

<div id=‘app‘>
    <global-component></global-component>
</div>
    
<script>
    // 註冊
    Vue.component(
        // 第一個是組件名稱  第二個object
        "global-component", {
            // 組件內容  抱一個div-單個根元素
            template: `<div><h3>{{ db }}</h3></div>`,
            // data必須是函數
            data(){
                // return中寫數據
                return {
                    db: ‘hello‘,
                }
            }
        }
    );
    
    new Vue({
        el: ‘#app‘,
        // template: `<global-component></global-component>`
    })
</script>
 

<div id=‘app‘>
    
</div>
    
<script>
    // 註冊組件
    Vue.component(
        // 第一個是組件名稱  第二個object
        "global-component", {
            // 組件內容  抱一個div-單個根元素，包在app這個div中
            template: `<div><h3>{{ db }}</h3></div>`,
            // data必須是函數
            data(){
                // return中寫數據
                return {
                    db: ‘hello‘,
                }
            }
        }
    );
    
    new Vue({
        el: ‘#app‘,
        // 根元素會替換div
        template: `<global-component></global-component>`
    })
</script>
 

全局組件

// 總結
Vue.component(
        // 第一個是組件名稱  第二個object
        "global-component", {
            // 組件內容  抱一個div-單個根元素，包在app這個div中
            template: `<div><h3>{{ db }}</h3></div>`,
            // data必須是函數
            data(){
                // return中寫數據
                return {
                    db: ‘hello‘,
                },
            computed: {},
            watch: {},
            methods: {},
            }
        }
    );
?
new Vue({
        el: ‘#app‘,
        // 根元素會替換div
        template: `<global-component></global-component>`
    })
?
// data 必須是函數
// 沒有屬性
 

組件系統之組件的復用

<div id=‘app‘>
    <global-component></global-component>
    <global-component></global-component>
    <global-component></global-component>
</div>
    
<script>
    // 註冊
    Vue.component(
        // 第一個是組件名稱  第二個object
        "global-component", {
            // 組件內容  抱一個div-單個根元素
            template: `<div><h3>{{ db }}</h3></div>`,
            // data必須是函數
            data(){
                // return中寫數據
                return {
                    db: ‘hello‘,
                }
            }
        }
    );
    
    new Vue({
        el: ‘#app‘,
        
    })
</script>

組價系統之局部組件的註冊

<div id=‘app‘>
    <app-header></app-header>
   
</div>
    
<script>
    let Header = {
        template: `<div><h3>{{ db }}</h3></div>`,
        data(){
            return {
                    db: ‘hello‘,
                }
        },
        computed: {},
    };
    
    new Vue({
        el: ‘#app‘,
        template: `<app-header></app-header>`,
        components: {
            ‘app-header‘: Header
        }
    })
</script>

<div id=‘app‘>
    <!--<App></App>-->   
</div>
    
<script>
    let Header = {
        template: `<div><h3>{{ db }}</h3></div>`,
        data(){
            return {
                    db: ‘hello‘,
                }
        },
        computed: {},
        // ...
    };
    // 在入口組件中註冊寫的局部組件
    let App = {
        template: `
            <div>
                <app-header></app-header>
            </div>
        `,
        components: {
            ‘app-header‘: Header
        },
        // 組件的私有數據
        data(){},
    };
    // 根實例
    new Vue({
        el: ‘#app‘,
        // 作為根被渲染
        template: `<App></App>`,
        components: {
            // App:App,
            App,
        }
    })
</script>

局部組件

- 總結
?
創建組件
    創建局部組件，起始就是創建一個JavaScript object
    let Header = {
        template: `<div><h3>{{ db }}</h3></div>`,
        data(){
            return {
                    db: ‘hello‘,
                }
        },
        computed: {},
    };
註冊組件
    
    new Vue({
        el: ‘#app‘,
        template: `<app-header></app-header>`,
        components: {
            ‘app-header‘: Header
        }
    })
?
組件可以嵌套使用
?

Vue組件系統之父子組件的通信

<div id=‘app‘>
   
</div>
    
<script>
    // 子
    let Header = {
        template: `<div><h3>{{ db }}</h3><h3>{{ fData }}</h3><</div>`,
        data(){
            return {
                    db: ‘hello‘,
                }
        },
        // 接收父親傳來的數據
        props:[‘fData‘],
        computed: {},
        // ...
    };
    // 在入口組件中註冊寫的局部組件
    // 父
    let App = {
        template: `
            <div>
                <app-header v-bind:fData="fatherData"></app-header>
            </div>
        `,
        components: {
            ‘app-header‘: Header
        },
        // 組件的私有數據
        data(){
            return {fatherData: 0,}
        },
    };
    // 根實例
    new Vue({
        el: ‘#app‘,
        // 作為根被渲染
        template: `<App></App>`,
        components: {
            // App:App,
            App,
        }
    })
</script>

Vue組件系統之子父組件的通信

<div id=‘app‘>
</dic>
?
<script>
    // 子
    let Header = {
        template: `<div> 
                <button @click=‘sonClick‘>點擊改變字體大小</button>
            </div>`,
        methods: {
            sonClick: function(){
                // 兒子的的行為傳給父親
                this.$emit("change-size", 0.1)
            }  
        },
        computed: {},
        // ...
    };
    // 父
    let App = {
        template: `
            <div>
                <span :style="{ fontSize: postFontSize + ‘em‘ }">我是字體</span>
                <app-header v-on:change-size="fatherClick"></app-header>
            </div>
        `,
        components: {
            ‘app-header‘: Header
        },
        // 組件的私有數據
        data(){
            return {
                postFontSize: 1,
            }
        },
        methods: {
            // 自己定義的change-size事件，一直在監聽，等著兒子傳來的信息
            fatherClick: function(value){
                this.postFontSize += value;
            }
        }
    };
    // 根實例
    new Vue({
        el: ‘#app‘,
        // 作為根被渲染
        template: `<App></App>`,
        components: {
            // App:App,
            App,
        }
    })
    
</script>

Vue組件系統之混入（mixin）

<div id=‘app‘>
</dic>
        <my-header></my-header>
        <p></p>
        <my-app></my-app>
<script>
    let Header = {
        template: `<div> 
                <button @click=‘show(‘xxx‘)‘>點擊顯示xxx來了</button>
                <button @click=‘hide(‘xxx‘)‘>點擊顯示xxx去了</button>
            </div>`,
        methods: {
            show: function(name){
                console.log(name+‘來了‘);
            },
            hide: function(name){
                console.log(name+‘來了‘);
            },
        },
    };
    let App = {
        template: `
            <div>
                <button @mouseenter=‘show(‘000‘)‘>點擊顯示000來了</button>
                <button @mouseleve=‘hide(‘000‘)‘>點擊顯示000去了</button>
            </div>
        `,
        methods: {
            show: function(name){
                console.log(name+‘來了‘);
            },
            hide: function(name){
                console.log(name+‘來了‘);
            },
        }
    };
    // 根實例
    new Vue({
        el: ‘#app‘,
        components: {
            "my-header": Header,
            "my-app": App,
        }
    })
    
</script>

<div id=‘app‘>
</dic>
?
<script>
    let mixs = {
        methods:{
            show: function(name){
                    console.log(name+‘來了‘);
                },
            hide: function(name){
                    console.log(name+‘來了‘);
                },
        }
    }
    let Header = {
        template: `<div> 
                <button @click=‘show(‘xxx‘)‘>點擊顯示xxx來了</button>
                <button @click=‘hide(‘xxx‘)‘>點擊顯示xxx去了</button>
            </div>`,
        mixins: [mixs],
    };
    let App = {
        template: `
            <div>
                <button @mouseenter=‘show(‘000‘)‘>點擊顯示000來了</button>
                <button @mouseleve=‘hide(‘000‘)‘>點擊顯示000去了</button>
            </div>
        `,
        mixins: [mixs],
    };
    // 根實例
    new Vue({
        el: ‘#app‘,
        components: {
            App,
        }
    })
    
</script>

Vue組件系統之插槽<slot></slot>

- 內容分發
<style>
    .box {
        width: 50px;
        height: 50px;
        float: left;
    }
</style>
<div id=‘app‘>
    <global-component>首頁</global-component>
    <global-component>免費</global-component>
    <global-component>收費</global-component>
</div>
    
<script>
    // 註冊全局組件
    Vue.component(
        "global-component", {
            template: `<div class="box"><slot></slot></div>`,
        }
    );
    
    new Vue({
        el: ‘#app‘,
    })
</script>

Vue組件系統之具名插槽

<style>
    .box {
        width: 50px;
        height: 50px;
        float: left;
    }
</style>
<div id=‘app‘>
    <global-component>
        <div slot=‘home‘>首頁</div>
        <div slot=‘free‘>免費</div>
        <div slot=‘toll‘>收費</div>
    </global-component>
</div>
    
<script>
    // 註冊全局組件
    Vue.component(
        "global-component", {
            template: `<div class="box">
                    <slot name="home"></slot>
                    <slot name="free"></slot>
                    <slot name="toll"></slot>
                </div>`,
        }
    );
    
    new Vue({
        el: ‘#app‘,
    })
</script>

Vue組件系統