您现在的位置是：首页 > 前端学习 > 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中的值提供一个带有验证需求的对象，而不是一个字符串数组，例如：