Vue.js基础语法（二）组件

r囧r小猫 2021-12-23 08:21 306阅读 0赞

vue学习的一系列，全部来自于表哥---表严肃，是我遇到过的讲课最通透，英文发音最好听的老师，想一起听课就去这里吧 [https://biaoyansu.com/i/hzhj1206][https_biaoyansu.com_i_hzhj1206]

把一段经常要用的东西封装成一个组件，就可以重复使用它，很方便的扩充它。

组件具有可重用性、可维护性。

# **1组件定义** #

Vue.component('组件名称',\{

template:'组件内容',

methods:\{

方法定义...

\});

例：

<!DOCTYPE html>
    <html>
        <head>
            <meta charset="utf-8">
            <title>组件</title>
        </head>
        <body>
            <div id="app">
                <alert></alert>
                <alert></alert>
                <alert></alert>
            </div>
        </body>
        <script src="js/vue.js"></script>
        <script>
            Vue.component('alert',{
                template:'<button @click="on_click">弹出层组件</button>',
                methods:{
                    on_click:function(){
                        alert("你好");
                    }
                }
            });
            
            var app=new Vue({
                el:'#app'            
            })
        </script>
    </html>

![1478663-20190422174952735-1906009950.png][]

![1478663-20190422174956702-660334453.png][]

注意<alert></alert>要放在id为app的div中，就是要给组件一个域。

组件的好处就是，可以在页面中放多个，每一个的功能都相同，在页面中仅仅写了一堆标签，但其背后的功能会很强大。

# **2全局和局部组件** #

## **2.1全局组件** ##

全局组件就像全局变量一样，不安全，例：

<!DOCTYPE html>
    <html>
        <head>
            <meta charset="utf-8">
            <title>组件2-局部组件</title>
        </head>
        <body>
            <div id="seg1">
                <alert></alert>
            </div>
            <div id="seg2">
                <alert></alert>
            </div>
        </body>
        <script src="js/vue.js"></script>
        <script>
            Vue.component('alert',{
                template:'<button @click="on_click">弹出层组件</button>',
                methods:{
                    on_click:function(){
                        alert("你好");
                    }
                }
            });
            
            new Vue({
                el:'#seg1'            
            })
            
            new Vue({
                el:'#seg2'            
            })
        </script>
    </html>

## **2.2局部组件** ##

如果一个组件确定只存在某一个域中，就要定义成局部组件，

例：在域\#seg1中，定义组件components，键名就是组件名：

<!DOCTYPE html>
    <html>
        <head>
            <meta charset="utf-8">
            <title>组件2-局部组件</title>
        </head>
        <body>
            <div id="seg1">
                <c-alert></c-alert>
            </div>
            <div id="seg2">
                <c-alert></c-alert>
            </div>
        </body>
        <script src="js/vue.js"></script>
        <script>
            var component_alert = {
                template: '<button @click="on_click">弹出层组件</button>',
                methods: {
                    on_click: function() {
                        alert("你好");
                    }
                }
            }
    
            new Vue({
                el: '#seg1',
                components: {
                    'c-alert': component_alert
                }
            })
    
            new Vue({
                el: '#seg2'
            })
        </script>
    </html>

![1478663-20190422175047327-1907557174.png][]

可以看到，组件只在\#seg1中起作用，在\#seg2中报错了。

局部组件较常用。

**3组件配置**

实例：点赞组件，点击赞数\+1，再点\-1

<!DOCTYPE html>
    <html>
        <head>
            <meta charset="utf-8">
            <title>配置组件</title>
            <style>
                .liked_btn {
         
                    background: #FF69B4;
                }
            </style>
        </head>
        <body>
            <div id="app">
                <like></like>
            </div>
        </body>
        <script src="js/vue.js"></script>
        <script>
            Vue.component('like', {
                template: '<button :class="{liked_btn:liked}" @click="toggle_like()">赞 {
         {like_count}}</button>',
                data: function() {
                    return {
                        like_count: 10, //点赞次数
                        liked: false, //判断是否点过
                    }
                },
                methods: {
                    toggle_like: function() {
                        if (!this.liked) {
                            this.like_count++;
                        } else {
                            this.like_count--;
                        }
                        this.liked = !this.liked;
                    }
                }
            })
    
            new Vue({
                el: '#app',
                data: {
    
                }
            })
        </script>
    </html>

![1478663-20190422175119494-1282934453.png][]

![1478663-20190422175123791-1490537032.png][]

template中的内容可以放在 \`\`(反引号) 中，就可以断行了，也可以写在html中，放在template标签中：

<!DOCTYPE html>
    <html>
        <head>
            <meta charset="utf-8">
            <title>配置组件</title>
            <style>
                .liked_btn {
         background: #FF69B4;}
            </style>
        </head>
        <body>
            <div id="app">
                <like></like>
            </div>
            
            <template id="like-component-tpl">
                <button :class="{liked_btn:liked}" @click="toggle_like()">赞 {
        {like_count}}</button>
            </template>
            
        </body>
        <script src="js/vue.js"></script>
        <script>
            Vue.component('like', {
                template: '#like-component-tpl',
                data: function() {
                    return {
                        like_count: 10, //点赞次数
                        liked: false, //判断是否点过
                    }
                },
                methods: {
                    toggle_like: function() {
                        if (!this.liked) {
                            this.like_count++;
                        } else {
                            this.like_count--;
                        }
                        this.liked = !this.liked;
                    }
                }
            })
    
            new Vue({
                el: '#app',
                data: {
    
                }
            })
        </script>
    </html>

**4组件传参**

## **4.1父子通信（父向子传参）** ##

Web里面的component其实就是一些自定义标签，背后有一些自定义功能。同样一个component在不同的情境下，它的表现不一定是一样的，有时希望给component传一个参数，就可以将里面的一些代码重用起来。

例：上次做的点击弹出组件，如果弹出的信息是可以变化的就更好了，

Vue提供了一个属性props，值是一个数组，里面就是要传进来的东西：

<!DOCTYPE html>
    <html>
        <head>
            <meta charset="utf-8">
            <title>父子通信</title>
        </head>
        <body>
            <div id="app">
                <alert msg="11111"></alert>
                <alert msg="22222"></alert>
            </div>
        </body>
        <script src="js/vue.js"></script>
        <script>
            Vue.component('alert',{
                template:'<button @click="on_click()">点击弹出</button>',
                props:['msg'],
                methods:{
                    on_click:function(){
                        alert(this.msg);
                    }
                }
            });
            
            var app=new Vue({
                el:'#app',
                data:{
                    
                }
            })
        </script>
    </html>

![1478663-20190422175210498-906995656.png][]

![1478663-20190422175214848-1759144539.png][]

例2：（注意转义字符）

<!DOCTYPE html>
    <html>
        <head>
            <meta charset="utf-8">
            <title>父子通信2</title>
        </head>
        <body>
            <div id="app">
                <user username='张三'></user>
                <user username='李四'></user>
            </div>
        </body>
        <script src="js/vue.js"></script>
        <script>
            Vue.component('user',{
                template:'<a :href="\'/user/\'+username">{
         {username}}</a>',
                props:['username']
            });
            var app=new Vue({
                el:'#app',
                data:{
                    
                }
            })
        </script>
    </html>

![1478663-20190422175236302-75307111.png][]

## **4.2子父通信（子向父传参）** ##

例：点击按钮显示余额

通过$emit触发一个事件，并传参，然后在父组件上监听这个事件

<!DOCTYPE html>
    <html>
        <head>
            <meta charset="utf-8">
            <title>子父通信</title>
        </head>
        <body>
            <div id="app">
                <balance></balance>
            </div>
        </body>
        <script src="js/vue.js"></script>
        <script>
            Vue.component('balance',{
                template:`
                <div>
                    <show @show-balance="show_balance"></show>
                    <div v-if="show">余额为：10000</div>
                </div>
                `,
                data:function(){
                    return{
                        show:false
                    }
                },
                methods:{
                    show_balance:function(data){
                        this.show=true;
                        console.log(data);
                    }
                }
            });
            
            Vue.component('show',{
                template:'<button @click="on_click()">显示余额</button>',
                methods:{
                    on_click:function(){
                        this.$emit('show-balance',{a:1,b:2});
                    }
                }
            });
            
            var app=new Vue({
                el:'#app'
            })
        </script>
    </html>

![1478663-20190422175503852-52075321.png][]

![1478663-20190422175509943-878798778.png][]

按钮是一个子组件，外面是一个父组件，在子组件触发事件，父组件接收事件；并通过函数传递数据，注意父组件中的show\_balance不加括号。

子组件向父组件喊话就是通过事件的方式。

## **4.3任意及平行组件间通信** ##

实例，定义两个组件，一个组件从input输入内容，另一个组件实时显示

<!DOCTYPE html>
    <html>
        <head>
            <meta charset="utf-8">
            <title>平行组件间通信</title>
        </head>
        <body>
            <div id="app">
                <xiaomei></xiaomei>
                <dashuai></dashuai>
            </div>
        </body>
        <script src="js/vue.js"></script>
        <script>
            var Event=new Vue();
            
            Vue.component('xiaomei',{
                template:
                `<div>
                请输入：<input @keyup="on_change" v-model="i_said"/>
                </div>`,
                data:function(){
                    return{
                        i_said:''
                    }
                },
                methods:{
                    on_change:function(){
                        Event.$emit('xiaomei-said-con',this.i_said)
                    }
                }
            });
            
            Vue.component('dashuai',{
                template:`
                <div>已接收：{
         {xiaomei_said}}</div>
                `,
                data:function(){
                    return{
                        xiaomei_said:''
                    }
                },
                mounted:function(){
                    var me=this;
                    Event.$on('xiaomei-said-con',function(data){
                        me.xiaomei_said=data;
                    })
                }
            });
            
            new Vue({
                el:'#app'            
            })
        </script>
    </html>

![1478663-20190422175331882-191872099.png][]

说明：

定义一个外部的东西\-事件的调度器Event，

在输入组件xiaomei中定义keyup事件，事件调用的方法中，用Event调用$emit触发一个事件，第一个参数是事件名称，自定义，第一个参数是数据，也就是this.i\_said，

在接收内容的组件dashuai中去监听这个事件，用属性mounted（代表组件初始化完成就监听，具体查看组件的生命周期），用Event.$on，第一个参数是事件的名称（上面定义的xiaomei-said-con），第二个参数是一个回调函数，函数的参数就是data，就是传过来的数据。注意Event.$on中再用this就不代表组件了，代表Event，可以在上面把this定义成一个变量me，再me.xiaomei\_said=data。

转载于:https://www.cnblogs.com/hzhjxx/p/10751597.html

[https_biaoyansu.com_i_hzhj1206]: https://biaoyansu.com/i/hzhj1206
[1478663-20190422174952735-1906009950.png]: /images/20211223/d8276f92760548e086eb28d993786833.png
[1478663-20190422174956702-660334453.png]: /images/20211223/852b4a1485bc4fe18b62afb9150c03e0.png
[1478663-20190422175047327-1907557174.png]: /images/20211223/1498b963428e485198ef8a5be74e8674.png
[1478663-20190422175119494-1282934453.png]: /images/20211223/742eec53b3204fa194d56bb2ef0e9ca7.png
[1478663-20190422175123791-1490537032.png]: /images/20211223/d4cfc0d957ce46ad82edec7ac5bc0285.png
[1478663-20190422175210498-906995656.png]: /images/20211223/89270e2d647c4b54af4f8df585f8ddcc.png
[1478663-20190422175214848-1759144539.png]: /images/20211223/1d985c6d8f0c4cfe907cbc55deee402b.png
[1478663-20190422175236302-75307111.png]: /images/20211223/8fdaedb835db469f9342c7777656ecec.png
[1478663-20190422175503852-52075321.png]: /images/20211223/2c371eb745f441268ed129b11525a3da.png
[1478663-20190422175509943-878798778.png]: /images/20211223/7c1711b0554c4eba84fcb17af18d1fd3.png
[1478663-20190422175331882-191872099.png]: /images/20211223/98db9fb9c5c7455a881d7fc7f4ad8e84.png