订阅博客
收藏博客
微博分享
QQ空间分享

vue之组件的基本使用

频道:前端 标签:vue组件 时间:2019年08月15日 浏览:25次 评论:0条
作者: 三只松果

一、vue的基本格式

1、全局注册

<div id="app">

    <my-component></my-component>

</div>


<script type="text/javascript">

    Vue.component('my-component',{ // 选项

            template:'<div>这里是组件的内容</div>'

    })
    var app = new Vue({

        el:'#app', 

    })

</script>


2、局部注册

<div id="app">

    <my-component></my-component>

</div>


<script type="text/javascript">

    var child = { 

        template:'<div>局部注册组件的内容</div>'

    }
    var app = new Vue({

            el:'#app', 

            components:{

                'my-component':child 

             }

     }) </script>


第一部分为HTML部分,第二部分为script部分


二、组件中的数据
1、组件中的data


<div id="app"> 

    <my-component></my-component>

</div>


<script type="text/javascript">

    Vue.component('my-component',{

     template:'<div>{{message}}</div>', 

     data:function(){

        return{ 

            message:'组件内容'

        } 

     }

    })
    var app = new Vue({

        el:'#app' 

    })

</script>


在组件中使用data时,数据需要像函数一样return出来才能用


2、父子间的参数传递


<div id="app">
    <my-component message="来自父组件的数据"></my-component>

</div>
<script type="text/javascript">

    Vue.component('my-component',{

        props:['message'], 

        template:'<div>{{message}}</div>'

    })

    var app = new Vue({ 

        el:'#app'

    }) 

</script>


3、组件的数据验证

Vue.component('my-component',{ 

    props:{

    // 必须是数字类型
    propA:Number,
    // 必须是字符串或数字类型 

    propB:[String,Number],
    // 布尔值,如果没有定义,默认值就是true 

    propC:{

        type:Boolean,

        default:true },

    // 数字,而且是必传的 

    propD:{

        type:Number,

        required:true },

    // 如果是数组或对象,默认是必须是一个函数来返回 

    propE:{

        type:Array, 

        default:function(){

            return [ ] 

            }

    },
    // 自定义一个验证函数 

    propF:{

        validator:function(value){ 

            return value > 10

        } 

    }

} })


4、非父子组件间数据通信


<div id="app">
    {{message}} 

    <component-a></component-a>

</div>
<script type="text/javascript">

    var bus = new Vue() 

    Vue.component('component-a',{

        template:'<button @click="handleEvent">传递事件</button>',

        methods:{ handleEvent:function(){

            bus.$emit('on-message','来自组件component-a的内容') 

            }

         }

     })

    var app = new Vue({ 

        el:'#app',

        data:{ message:''

        },

        mounted:function(){

            var _this = this //在实例初始化时,监听来自bus实例的事件                     bus.$on('on-message',function(msg){

                _this.message = msg 

            })

        } 

    })

</script>

通过一个vue实例bus作为中介传递信息,用$emit()发送,$on()来接收


三、组件切换


<div id="app">
    <button @click="comName = 'login'">登录</button> 

    <button @click="comName = 'register'">注册</button> 

    <component :is='comName'></component>

</div>


<script type="text/javascript">

    Vue.component('login',{ 

        template:'<h3>登录组件</h3>'

    }) 

    Vue.component('register',{

        template:'<h3>注册组件</h3>' 

    })

    var app = new Vue({

        el:'#app', data:{

        comName:'login' 

        }

    }) 

</script>

通过修改comName的值达到组件切换的效果


四、插槽(slot)


具名插槽

<div id="app"> 

    <child-component>

    <h2 slot="header">标题</h2> 

        <p>正文内容</p> 

        <p>更多的正文内容</p>
    <div slot="footer">底部信息</div>

    </child-component> </div>

<script> 

    Vue.component('child-component',{

        template:'\
        <div class="container">\

            <div class="header">\
            <slot name="header"></slot>\

            </div>\
            <div class="main">\

                <slot></slot>\ 

            </div>\

            <div class="footer">\
                <slot name="footer"></slot>\

            </div>\ 

        </div>'

    })
    var app = new Vue({

        el:'#app' 

    })

</script>

可以将名字对应的插槽显示在对应的位置

◎欢迎参与讨论,请在这里发表您的看法、交流您的观点。