您现在的位置是:首页 > 前端学习 > VueVue

Vue组件(第二节)(图文)

第十三双眼睛2020-11-01【Vue】人已围观

简介组件是vue最强大的功能之一,组件可以扩展html元素,封装可重用的代码,组件系统可以让我们用小的组件来构建大型应用,几乎任意一个大型的应用都可以抽象为一个组件树

Vue的组件分为全局组件和局部组件,全局组件可以再项目中所有地方使用,局部组件只能再包含局部组件的实例内部使用
注册一个全局的组件如下:
<div id="App">
            <hello></hello>
        </div>
        
        <script type="text/javascript">
            Vue.component('hello',
                {
                    template:'<h1>你好世界!</h1>'
                }
            )
        </script>
我们也可以在实例中注册局部组件,这样我们只能在这个实例中使用他。
 
<div id="App">
            <hello></hello>
        </div>
        <script type="text/javascript">
            var vue = new Vue({
                el:'#App',
                components:{
                    'hello':{
                        template:'<h1>你好世界</h1>'
                    }
                }
            })
        </script>

两中情况的具体效果如下图:
prop是子组件用来接受父组件传过来的数据的自定义属性:
 

<div id="App">
            <hello message="你好啊"></hello>
        </div>
        <script type="text/javascript">
            var vue = new Vue({
                el:'#App',
                components:{
                    'hello':{
                        template:'<h1>{{this.message}}</h1>',
                        props:['message']
                    }
                }
            })
        </script>

效果如下图所示:

动态porp
类似于v-bind绑定HTML到一个表达式,也可以使用v-bind动态绑定props的值到父组件的数据中,每当父组件的数据发生变化时,该变化也会传导给子组件

<div id="App">
            <div id="">
                <input type="text" v-model="parentMessage" />
                <br>
                <child v-bind:message="parentMessage"></child>
            </div>
        </div>
        <script type="text/javascript">
            Vue.component('child',{
                props:['message'],
                template:'<span>{{message}}</span>'
            })
            var vue = new Vue({
                el:'#App',
                data:{
                    parentMessage:'父组件中数据'
                }
            })
        </script>

具体效果如下图:

prop实例:

<div id="App">
            <ol>
                <todo-item v-for="todo in sites" v-bind:todo="todo"></todo-item>
            </ol>
        </div>
        <script type="text/javascript">
            Vue.component('todo-item',{
                props:['todo'],
                template:'<li>{{todo.text}}</li>'
            })
            var vue = new Vue({
                el:'#App',
                data:{
                    sites:[
                        {text:'baidu'},
                        {text:'yahu'},
                        {text:'tobao'}
                    ]
                }
            })
        </script>

具体效果如下图所示:

prop验证
组件可以为props指定验证要求
为了定制prop的验证方式,可以为props中的值提供一个带有验证需求的对象,而不是一个字符串数组,例如:

<script type="text/javascript">
            Vue.component('todo-item',{
                props:{
                    propA:Number,
                    propB:[String,Number],
                    propC:{
                        type:String,
                        required:true
                    },
                    propD:{
                        type:Number,
                        default:100
                    },
                    propE:{
                        type:Object,
                        default:function(){
                            return {message:'hello'}
                        }
                    },
                    propF:{
                        validator:function(value){
                            return ['success', 'warning', 'danger'].indexOf(value) !== -1 
                        }
                    }
                },
                template:'<li>{{todo.text}}</li>'
            })
            var vue = new Vue({
                el:'#App',
                data:{
                    
                }
            })
        </script>

当验证失败的时候,vue会产生一个控制台的警告,
type可以是下面原生构造器
String,Number,Boolean,Array,Object,Date,Function,Symbol




 

Tags:组件

很赞哦! ()

文章评论

    共有条评论来说两句吧...

    用户名:

    验证码:

本站推荐

站点信息

  • 网站名称:JavaStudy
  • 建站时间:2019-1-14
  • 网站程序:帝国CMS7.5
  • 文章统计130篇文章
  • 标签管理标签云
  • 统计数据百度统计
  • 微信公众号:扫描二维码,关注我们