您现在的位置是:首页 > 前端学习 > 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:组件
很赞哦! ()
上一篇:Vue使用(第一节)(图文)