Vue之全域性元件

　　全域性元件可以被任何區域性元件呼叫

<div id="app">
    <!--這裡是元件的使用-->
    <global-component></global-component>
</div>
<script>
    // 注意這裡是component不是components
    Vue.component('global-component',{
        template:`
              <div>
                  <h2>{{wanrong}}</h2> // 這裡的變數可以獲取data中返回的值
                  <h3>{{wanrong}}</h3>
              </div>
            `,
        data(){
            return {
                wanrong:'Hello wanrong!',
            }
        }
    });
    new Vue({
        el:'#app',
        // 這裡是元件的使用
        template: `<global-component></global-component>`
    })
</script>

Vue之區域性元件

<div id="app">

</div>
<script>
    // 第一步建立一個object物件
    let Header = {
        template: `
            <div>
                <h1>{{greeting}}</h1>
            </div>
        `,
        data() {
            return {greeting: 'Hello World'} // 這是一個單體函式用來給greeting傳遞值
        }
    };
    let App = {
        // 使用子元件
        template: `
            <app-header></app-header>
        `,
        // 在父元件中註冊子元件
        components:{
            'app-header': Header,
        }
    };
    new Vue({
        el:'#app',
　　　　 // 使用父元件
        template:'<app></app>',
　　　　 // 註冊父元件
        components: {
            App,
        }
    })
</script>

Vue之父子元件的通訊

<div id="app">

</div>
<script>
    let Header = {
        template: `
            <div>
                <h1>{{ greeting }}</h1>
                <h2>{{ fatherData }}</h2>
            </div>
        `,
        // 獲取父親元件傳遞過來的值（獲取的是count的值）
        props: ['fatherData'],
        data() {
            return {
                greeting: 'Hello Vue',  // 給greeting傳遞一個值
            }
        },
    };

    let App = {
        template: `
            <div>
                <app-header :fatherData="count"></app-header>
            </div>
        `,
        components: {
            'app-header': Header,
        },
        data() {
            return {
                count: 100,  // 給count傳值
            }
        }
    };

    new Vue({
        el: '#app',
        template: `<App></App>`,
        components: {
            App,
        }
    })
</script>

Vue之子父元件的通訊

<div id="app">

</div>
<script>
    let Header = {
        template: `
            <div>
                <button v-on:click="sonClick">點選給父元件傳遞資料</button>  // 點選button按鈕會觸發sonClick這個方法
            </div>
        `,
        methods: {
            sonClick: function () {
                this.$emit('click',0.1);  // 會自動的觸發下面的click方法，並且會給fatherClick函式傳遞一個0.1這個值
            }
        },
    };

    let App = {
        template: `
            <div>
                <span v-bind:style="{ fontSize: postFontSize + 'em' }">father</span>  // em可以理解為代表單位，例如：px等等
                <app-header v-on:click="fatherClick"></app-header>  // 上面的$emit會自動的獲取click事件，並執行click事件所代表的的fatherClick函式，
這裡不一定是一個函式也可以是一個表示式。
            </div>
        `,
        components: {
            'app-header': Header,  // 註冊app-header
        },
        data() {
            return {
                postFontSize: 1,
            }
        },
        methods: {
            fatherClick: function (value) {
                this.postFontSize += value; // 會獲取到上面傳遞的值0.1，並修改後傳遞給postFontSize這個值
            }
        }

    };

    new Vue({
        el: '#app',
        template: `<App></App>`,
        components: {
            App,
        }
    })
</script>

Vue組建系統之混入

<div id="app">
    <my-gxx></my-gxx>
    <my-zq></my-zq>
</div>
<script>
    let mixs = { // 提高程式碼的複用性
        methods: {
            show: function (name) {
                alert(name + '來了')
            },
            hide: function (name) {
                alert(name + '走了')
            },
        },
    };

    let mygxx = {
        template: `
            <div>
                <button v-on:click="show('gxx')">點選顯示gxx來了</button> // 繫結click事件，執行show函式
                <button v-on:click="hide('gxx')">點選顯示gxx走了</button> // 繫結click事件，執行hide函式
            </div>
        `,
        mixins: [mixs],  // 這樣操作以後就不需要在進行重複的註冊和使用元件了
    };

    let myzq = {
        template: `
            <div>
                <button v-on:mouseenter="show('zq')">點選顯示zq來了</button>
                <button v-on:mouseleave="hide('zq')">點選顯示zq走了</button>
            </div>
        `,
        mixins: [mixs],
    };

    new Vue({
        el: '#app',
        components: {
            'my-gxx': mygxx,
            'my-zq': myzq,
        }
    })

Vue組建系統之插槽

<div id="app">
    <global-component>首頁</global-component>
    <global-component>免費課程</global-component>
    <global-component>輕課</global-component>
    <global-component>wjs</global-component>
    <global-component>gxx</global-component>
</div>
<script>
    Vue.component('global-component',{
        template: `
            <div class="box"><slot></slot></div>  // slot就是插槽的寫法
        `,
        },
    );

    new Vue({
        el: "#app",

    })
</script>

 Vue組建系統之具名插槽

<div id="app">
    <global-component>
        <div slot="home">首頁</div>
        <div slot="freecourse">免費課程</div>
        <div slot="wjs">wjs</div>
        <div slot="gxx">gxx</div>
    </global-component>
</div>
<script>
    Vue.component('global-component', {
            template: `
            <div class="box">
                <slot name="freecourse"></slot>
                <slot name="gxx"></slot>
                <slot name="wjs"></slot>
                <slot name="home"></slot>
            </div>
        `,
        }, 
    );

    new Vue({
        el: "#app",

    })
</script>