快速学会Vue之3---Vue组件

Vue组件

组件 (Component) 是 Vue.js 最强大的功能之一。

组件可以扩展 HTML 元素，封装可重用的代码。是可复用的Vue实例。

组件的注册

全局注册在main.js中，全局注册后，在任意xx.vue页面都可以使用.局部组件,只能在本页面使用，适合轮播图这样的组件

<body>

<div id="app">
    <my_child></my_child>
</div>

<script>
    let Child = {
        template:`<div>{{name}}</div>`,
        data(){
            return{
                name:"hello"
            }
        }
    }

    new Vue({
        el:"#app",
        components:{
            "my_child":Child
        }
    })


</script>

</body>
局部注册一
<body>

<div id="app">

</div>

<script>
    let Child = {
        template:`<div>{{name}}</div>`,
        data(){
            return{
                name:"hello"
            }
        }
    }

    new Vue({
        template:`<my_child></my_child>`,
        el:"#app",
        components:{
            "my_child":Child
        }
    })


</script>

</body>
局部注册二
#注意:data一定是一个方法

<body>

<div id="app">
    <my_component></my_component>
</div>

<script>

    Vue.component('my_component',{
        template:`<div>{{name}}</div>`,
        data(){
            return {
                name:"LILEI"
            }
        },
    });

    new Vue({
        el:"#app",
    })

</script>

</body>
全局注册方式一
<body>

<div id="app">

</div>

<script>

    Vue.component('my_component',{
        template:`<div>{{name}}</div>`,
        data(){
            return {
                name:"gaoxin"
            }
        },
    });

    new Vue({
        template:`<my_component></my_component>`,
        el:"#app",
    })

</script>

</body>
全局注册方式二
// js 代码
Vue.component('child', {
    template: `<div><button @click="on_click()">{{msg}}</button></div>`,
    data: function () {
        return {
            msg: "点我",
        }
    },
    methods: {
        on_click(){
            alert(123)
        }
    }
});
new Vue({
    el: "#app",
})
组件中的data methods
子组件的注册

组件之间的通信

我们的组件在任何地方用的时候都要是一个样子么~

可不可以我们给组件传个参数~让组件在不同的地方表现不同的状态~

我们之前说过博客评论@某某某，点击用户名可以跳转到该用户站点。

这样一个小功能，我们每次@的时候都要写，我们可以封装成组件，传值即可~~

// html 代码
<div id="app">
    <child username="gaoxin"></child>
</div>
// js 代码
Vue.component('child', {
    template: `<a :href="'/user/'+ username">{{username}}</a>`,
    props: ["username"],
});


var app = new Vue({
    el: "#app",
    data:{
        name: "@gaoxin"
    }

});
父子通信

app.$on(event, callback) 监听当前实例上的自定义事件，事件由$emit触发，回调函数接收事件触发器额外参数。

app.$emit(event, [args....])  触发当前实例上的事件，额外参数传给监听器的callback回调函数。

// html 代码
<div id="app">
    <parent></parent>
</div>
// js 代码
Vue.component('parent',{
    template: `
        <div>
            <child @show_balance="show"></child>
            <p v-if="active">您的余额998</p>
        </div>
    `,
    data: function () {
        return {
            active: false,
        }
    },
    methods: {
        show: function(data){
            this.active=true;
            console.log(data)
        }
    }

});
Vue.component('child', {
    template: `<div><button @click="on_click()">{{msg}}</button></div>`,
    data: function () {
        return {
            msg: "显示余额",
        }
    },
    methods: {
        on_click(){
            // alert(123)
            this.$emit('show_balance', {q:1,b:2})
        }
    }
});
子父通信

平行组件之间的通信，喊话需要一个中间调度器，在组件加载完成之后去监听调度器事件，回调函数接收数据。

// html 代码
<div id="app">
    <whh></whh>
    <shh></shh>
</div>
// js 代码
var Event = new Vue()

Vue.component('whh',{
    template: `
        <div>
            我说: <input @keyup="on_change" v-model="i_said">
        </div>
    `,
    data: function () {
        return {
            i_said: '',
        }
    },
    methods: {
        on_change: function () {
            Event.$emit("whh_said_something", this.i_said)
        }
    }
});
Vue.component('shh', {
    template: `
        <div>
            花花说:{{whh_said}}
        </div>
    `,
    data: function () {
        return {
            whh_said: '',
        }
    },
    mounted: function () {
        var me = this
        Event.$on('whh_said_something', function (data) {
            me.whh_said = data
        })
    }
});
非父子组件通信

混合Mixins

重复功能和数据的储存器，可以覆盖Mixins的内容。

// 点击显示和隐藏  提示框的显示和隐藏
// html 代码
<div id="app">
    <PopUp></PopUp>
    <ToolTip></ToolTip>
</div>
// js 代码
var base = {
     data: function () {
        return {
            visible: false,
        }
    },
    methods: {
        show: function () {
            this.visible = true
        },
        hide: function () {
            this.visible = false
        }
    }
}

Vue.component('popup', {
    template:`
        <div>
        <button @click="show">PopUp show</button>
        <button @click="hide">PopUp hide</button>
        <div v-if="visible"><p>hello everybody</p></div>
        </div>
    `,
    mixins: [base],
    data: function () {
        return {
            visible: true,
        }
    }

});
Vue.component('tooltip', {
    template: `
        <div>
        <div @mouseenter="show" @mouseleave="hide">ToolTip</div>
        <div v-if="visible"><p>ToolTip</p></div>
        </div>
    `,
    mixins: [base]
});

new Vue({
    el: "#app",
})
Mixins

插槽 Slot

插槽是一套内容分发的API，在组件中，<slot>作为内容承载分发的出口

// html 代码
<div id="app">
    <panel>
        <div slot="title"> HELLO</div>
        <div slot="content">hello</div>
        
    </panel>
    <panel></panel>
    <panel></panel>
</div>

<template id="panel-tpl">
    <div class="panel">
        <div class="title">
            <slot name="title"></slot>
        </div>
        <div class="content">
            <slot name="content"></slot>
        </div>
        <!--<div class="content">Failure is probably the fortification in your pole. It is like a peek your wallet as the thief, when you are thinking how to spend several hard-won lepta,</div>-->
        <div class="footer">
            <slot name="footer">更多信息</slot>
        </div>
    </div>
</template>
// js 代码
Vue.component('panel', {
    template: '#panel-tpl',

});

new Vue({
    el: "#app",
})
Slot

 

posted @ 2020-08-23 18:43  永永的奇妙旅程  阅读(113)  评论(0)    收藏  举报