快捷導(dǎo)航

Vue動(dòng)態(tài)組件與內(nèi)置組件淺析講解

更新時(shí)間：2022年08月29日 10:23:42 作者：丘比特懲罰陸

閑話少說，我們進(jìn)入今天的小小五分鐘學(xué)習(xí)時(shí)間，前面我們了解了vue的組件，我們本文主要是講解vue的動(dòng)態(tài)組件和內(nèi)置組件，文中通過示例代碼介紹的非常詳細(xì)，對(duì)大家的學(xué)習(xí)或者工作具有一定的參考學(xué)習(xí)價(jià)值，需要的朋友們下面隨著小編來一起學(xué)習(xí)學(xué)習(xí)吧

一、動(dòng)態(tài)組件

在vue中，有很多的組件可以掛載同一個(gè)掛載點(diǎn)上面，要在同一個(gè)掛載的點(diǎn)上的多個(gè)組件之間可以實(shí)現(xiàn)動(dòng)態(tài)的切換渲染，我們可以通過內(nèi)置組件component的is屬性動(dòng)態(tài)的綁定組件，然后我們就可以根據(jù)is的值來決定哪一個(gè)組件要被渲染，非常的方便。

我們通過一點(diǎn)簡單的實(shí)例代碼可以加深了解：

示例代碼：

<!DOCTYPE html>
<html lang="en">
<head>
    <title>組件之間的傳遞</title>
</head>
<body>
    <div id="app">
        <h1>小小閑置網(wǎng)</h1>
<input type="radio" name="tab" value="qiubite1" v-model="cfl">王者賬號(hào)：
<img src="C:\Users\Administrator\Desktop\李寶\wangzhe.jpg" alt="" style="width: 30px;height:30px">
<input type="radio" name="tab" value="qiubite2" v-model="cfl">電話：
<input type="radio" name="tab" value="qiubite3" v-model="cfl">估價(jià)：
<component v-bind:is="cfl"></component>
</component>
    </div>
     <template id="n1">
        <div style="width: 200px;height: 200px;border: 2px solid rgb(100, 100, 196);">
            <h1>賬號(hào)</h1>
            <input type="text" placeholder="輸入你的賬號(hào)：">
        </div>
     </template>
     <template id="n2">
        <div style="width: 200px;height: 200px;border: 2px solid rgb(100, 100, 196);">
            <h1>電話</h1>
            <input type="text" placeholder="輸入你的電話：">
        </div>
     </template>
     <template id="n3">
        <div style="width: 200px;height: 200px;border: 2px solid rgb(100, 100, 196);">
            <h1>估價(jià)：</h1>
            <input type="text" placeholder="你心儀賣出的價(jià)格：">
        </div>
     </template>
    <script src="http://cdn.staticfile.org/vue/2.2.2/vue.min.js"></script>
    <script>
var  vm = new Vue({
    el:"#app",
    data:{cfl:"qiubite1"},
    components:{
            'qiubite1':{template:'#n1'},
            'qiubite2':{template:'#n2'},
            'qiubite3':{template:'#n3'},
    }
})
    </script>
</body>
</html>

運(yùn)行結(jié)果：

我們可以看到三個(gè)按鈕的value的值設(shè)置成了組件的名字，雙向綁定cfl(懲罰陸，沒什么含義，自己亂起的)數(shù)據(jù)，單擊按鈕，就可以改變value的值從而更新cfl里面的值；component組件的is屬性動(dòng)態(tài)的綁定了cfl里面的值，根據(jù)這個(gè)is就知道哪個(gè)組件被渲染了。

二、內(nèi)置組件

根據(jù)上面的實(shí)例結(jié)果，我們看到了輸入框里輸入數(shù)據(jù)，當(dāng)你切換到別的組件的時(shí)候，原來組件的數(shù)據(jù)不會(huì)被保存，所以內(nèi)置組件可以包裹我們的動(dòng)態(tài)組件，會(huì)將往期的組件進(jìn)行緩存，而不是銷毀，他會(huì)把切換回去的組件緩存起來，做到保留組件狀態(tài)。

實(shí)例代碼：

<!DOCTYPE html>
<html lang="en">
<head>
    <title>組件之間的傳遞</title>
</head>
<body>
    <div id="app">
        <h1>小小閑置網(wǎng)</h1>
<input type="radio" name="tab" value="qiubite1" v-model="cfl">王者賬號(hào)：
<img src="C:\Users\Administrator\Desktop\李寶\wangzhe.jpg" alt="" style="width: 30px;height:30px">
<input type="radio" name="tab" value="qiubite2" v-model="cfl">電話：
<input type="radio" name="tab" value="qiubite3" v-model="cfl">估價(jià)：
<keep-alive><component v-bind:is="cfl"></component></keep-alive>
</component>
    </div>
     <template id="n1">
        <div style="width: 200px;height: 200px;border: 2px solid rgb(100, 100, 196);">
            <h1>賬號(hào)</h1>
            <input type="text" placeholder="輸入你的賬號(hào)：">
        </div>
     </template>
     <template id="n2">
        <div style="width: 200px;height: 200px;border: 2px solid rgb(100, 100, 196);">
            <h1>電話</h1>
            <input type="text" placeholder="輸入你的電話：">
        </div>
     </template>
     <template id="n3">
        <div style="width: 200px;height: 200px;border: 2px solid rgb(100, 100, 196);">
            <h1>估價(jià)：</h1>
            <input type="text" placeholder="你心儀賣出的價(jià)格：">
        </div>
     </template>
    <script src="http://cdn.staticfile.org/vue/2.2.2/vue.min.js"></script>
    <script>
var  vm = new Vue({
    el:"#app",
    data:{cfl:"qiubite1"},
    components:{
            'qiubite1':{template:'#n1'},
            'qiubite2':{template:'#n2'},
            'qiubite3':{template:'#n3'},
    }
})
    </script>
</body>
</html>