Vue之组件

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">
        <wjs></wjs>
        <gxx></gxx>
    </div>
    <script>
        // 创建一个中间调度器
        let zq = new Vue();
        let wjs = {
            template: `
                <div>
                    <h1>这是wjs</h1>
                    <button @click="wjs_click">点击向gxx说话</button>
                </div>
            `,
            methods: {
                wjs_click: function () {
                    // 向中间调度器提交事件
                    zq.$emit('wjs_say','ainio')
                }
            }
        };

        let gxx = {
            template: `
                <div><h1>这是gxx</h1>{{say}}</div>
            `,
            data(){
                return {
                    say: '',
                }
            },
            mounted(){
                // 监听中间调度器中的方法
                let that = this;  // 因为this的指向问题所以要处理
                zq.$on('wjs_say',function (data) {
                    that.say = data
                })
            }
        };

        const app = new Vue({
            el: '#app',
            components: {
                wjs: wjs,
                gxx: gxx,
            }
        })
    </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>