Vue组件系统

Posted 2021-01-18 xiao-xue-di

目录：

　　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>