Vue 組件的使用

概念

組件的出現(xiàn)，就是為了拆分Vue實(shí)例的代碼量，能夠讓我們以不同的組件，來劃分不同的功能模塊，將來我們需要什么樣的功能，就調(diào)用什么樣的組件。

?？旎徒M件化的區(qū)別

  • ?？旎菏菑拇a邏輯的角度劃分的；方便代碼分層開發(fā)，保證每個(gè)功能模塊的職能單一；
  • 組件化：是從UI界面的角度分析的；前端組件化，方便UI組件的重用

組件的創(chuàng)建方式：

  • 方式1
    1、使用Vue.extend 來創(chuàng)建全局Vue組件
    2、通過template屬性，指定組件要展示的html結(jié)構(gòu)
    3、使用Vue.component('組件名',創(chuàng)建出來的組件模板對(duì)象)
    4、使用組件，直接把組件名稱以HTML標(biāo)簽的形式引入頁面
    注意：駝峰式命名法要以‘-’隔開，非駝峰式明明如 mycom1 可以直接引入<mycom1></mycom1>
 <div id="app">
     <!-- 4、使用組件，直接把組件名稱以HTML標(biāo)簽的形式引入頁面 -->
     <!-- 注意駝峰式命名法要以‘-’隔開，非駝峰式明明如 mycom1 可以直接引入<mycom1></mycom1> -->
     <my-com1></my-com1> 
</div>
<script>
    var com1 = Vue.extend({        //1、使用Vue.extend 來創(chuàng)建全局Vue組件
        template:'<h3>使用Vue.extend創(chuàng)建的組件</h3>'    //2、通過template屬性，指定組件要展示的html結(jié)構(gòu)
    })
    Vue.component('myCom1',com1)  //3、使用Vue.component('組件名',創(chuàng)建出來的組件模板對(duì)象)
    var vm = new Vue({
        el:'#app',
        data(){
            return {

            }
        }
    })
</script>

省略步驟

 Vue.component('myCom1',Vue.extend({
      template:'<h3>使用Vue.extend創(chuàng)建的組件</h3>'   
}))

再省略下

 Vue.component('myCom1',{
      template:'<h3>使用Vue.extend創(chuàng)建的組件</h3>'   
})
  • 方式2
    使用template標(biāo)簽注冊(cè)組件，然后引入
<div id="app">
    <my-com1></my-com1> 
</div>
<template id="tem1">
    <div>
        <h1>etemplate標(biāo)簽創(chuàng)建的組件</h1>
        <h1>etemplate標(biāo)簽創(chuàng)建的組件</h1>
    </div> 
</template>
<script>
    Vue.component('myCom1',{
        template:'#tem1' 
    })
    var vm = new Vue({
        el:'#app',
        data(){
            return {

            }
        }
    })
</script>
  • 方式三（私有組件）：
<div id="app">
    <my-com1></my-com1> 
</div>
<template id="tem1">
    <div>
        <h1>etemplate標(biāo)簽創(chuàng)建的組件</h1>
        <h1>etemplate標(biāo)簽創(chuàng)建的組件</h1>
    </div> 
</template>
<script>
    var vm = new Vue({
        el:'#app',
        data(){
            return {

            }
        }，
        components:{    //定義Vue實(shí)例的私有組件
            myCom3:{
                template:'#tem3'
            }
        }
    })
</script>

組件中的data和methods

data
  • 組件可以有自己的data
  • 組件的data必須是一個(gè)方法 并且要用return返回一個(gè)對(duì)象
  • 組件中的data使用方式和實(shí)例中的一模一樣
<div id="app">
        <my-com3></my-com3>
</div>
<template id="tem3">
      <div>
        <h1>{{msg}}</h1>
     </div>
</template>

components:{    //定義Vue實(shí)例的私有組件
        myCom3:{
            template:'#tem3',
            data ( ) { 
              return { 
                msg:'這是組件自己的私有數(shù)據(jù)'
              }
            }
        }
    }
methods

組件也有自己的methods 與Vue實(shí)例的methods使用方式一致

<div id="app">
        <my-com3></my-com3>
</div>
<template id="tem3">
      <div>
        <h1 @cliclk="show">{{msg}}</h1>
     </div>
</template>

components:{    //定義Vue實(shí)例的私有組件
        myCom3:{
            template:'#tem3',
            data ( ) { 
              return { 
                msg:'這是組件自己的私有數(shù)據(jù)'
              }
            }，
           methods:{ 
                show(){ this.msg = this.msg + '123'}
           }
        }
    }

組件切換

Vue提供了 component ,來展示對(duì)應(yīng)名稱的組件，:is屬性，可以用來置頂要展示的組建名稱；所以可以通過以下方式完成組件切換

<div id="app">
    <a @click.prevent="comName='login'" href="">登陸</a>
    <a @click.prevent="comName='register'" href="">注冊(cè)</a>
    <component :is="comName"></component>
</div>
<template id="login">
    <div>
       <h1>登陸組件</h1>
    </div>
</template> 
<template id="register">
        <div>
            <h1>注冊(cè)組件</h1>
        </div>
</template>
<script>
    var vm = new Vue({
        el:'#app',
        data(){
            return {
                comName:'login'
            }
        },
        components:{    
            login:{
                template:'#login'
            },
            register:{
                template:'#register'
            }
        }
    })
</script>

組件之間的傳值

  • 父組件向子組件傳值
 <div id="app">
    <!-- 1、通過數(shù)據(jù)綁定的形式將父組件的數(shù)據(jù)傳遞給子組件 -->
    <com1 :parentmsg="msg"></com1>     
</div>
<template id="tem1">
    <div>
        <!-- 3、使用父組件傳過來的數(shù)據(jù) -->
        <h2>我是子組件，我拿到的父組件數(shù)據(jù)：{{parentmsg}}</h2>
    </div>
</template>
<script>
    var vm = new Vue({
        el:'#app',
        data(){
            return {
                msg:'父組件數(shù)據(jù)msg'
            }
        },
        components:{    
           com1:{
               template:'#tem1',
               props:[          //2、子組件拿到父組件的數(shù)據(jù)后，先在props數(shù)組中定義（接收）后才能使用
                                    //注意：props中的數(shù)據(jù)都是只讀的無法重新賦值
                   'parentmsg'
               ]
           }
        }
    })
</script>
  • 父組件向子組件傳遞方法 并向父組件傳參
<div id="app">
    <!-- 1、父組件通過事件綁定傳遞給子組件方法 show -->
    <com1 @func="show"></com1>    
</div>
<template id="tem1">
    <div>
        <!-- 3、子組件調(diào)用方法 -->
        <button @click="parentshow">我是子組件，我要調(diào)用父組件的show方法</button>
    </div>
</template>
<script>
    var vm = new Vue({
        el:'#app',
        data(){
            return {
                msg:'父組件數(shù)據(jù)msg'
            }
        },
        methods:{
            show(data){
                console.log('父組件的方法-----子組件的參數(shù)：'+data)
            }
        },
        components:{    
            com1:{
                template:'#tem1',
                data(){
                       return {
                           msg:'我是子組件的數(shù)據(jù)'
                       }
                 },
                methods:{
                  parentshow(){
                      this.$emit('func',this.msg)  //2、子組件通過 $emit 接收父組件傳過來的方法   第二個(gè)位置傳參
                  }
                }
            }
        }
    })
</script>
  • 子組件向父組件傳值
    其實(shí)以上方法基本就實(shí)現(xiàn)了向父組件傳值，可以稍微改下代碼
<div id="app">
    <com1 @func="show"></com1>   
    <span>{{msg}}</span> 
</div>
<template id="tem1">
    <div>
        <button @click="parentshow">我是子組件，我要調(diào)用父組件的show方法</button>
    </div>
</template>
<script>
    var vm = new Vue({
        el:'#app',
        data(){
            return {
                msg:'父組件數(shù)據(jù)msg'
            }
        },
        methods:{
            show(data){
                //在點(diǎn)擊同時(shí)，父組件已經(jīng)拿到了子組件的數(shù)據(jù)，賦值給data里邊的數(shù)據(jù)就行了
                this.msg=data
            }
        },
        components:{    
            com1:{
                template:'#tem1',
                data(){
                       return {
                           msg:'我是子組件的數(shù)據(jù)'
                       }
                 },
                methods:{
                  parentshow(){
                      this.$emit('func',this.msg)  
                  }
                }
            }
        }
    })
</script>
?著作權(quán)歸作者所有,轉(zhuǎn)載或內(nèi)容合作請(qǐng)聯(lián)系作者
【社區(qū)內(nèi)容提示】社區(qū)部分內(nèi)容疑似由AI輔助生成，瀏覽時(shí)請(qǐng)結(jié)合常識(shí)與多方信息審慎甄別。
平臺(tái)聲明：文章內(nèi)容（如有圖片或視頻亦包括在內(nèi)）由作者上傳并發(fā)布，文章內(nèi)容僅代表作者本人觀點(diǎn)，簡(jiǎn)書系信息發(fā)布平臺(tái)，僅提供信息存儲(chǔ)服務(wù)。

相關(guān)閱讀更多精彩內(nèi)容

友情鏈接更多精彩內(nèi)容