avant-propos
Il s'agit de toute une série d'apprentissage de cinq minutes sur Vue. Il faut cinq minutes chaque jour pour lire chaque petite connaissance de Vue. L'éditeur précédent a résumé pour vous les connaissances pertinentes sur les composants de Vue. Vous pouvez aller sur le blog du blogueur pour trouver votre favori. Ce n'est pas facile de lire le blog. J'espère que tout le monde pourra donner un like. Chaque like de la vôtre est un grand soutien pour ce blogueur.
Eh bien, sans plus tarder, entrons dans le petit temps d'apprentissage de cinq minutes d'aujourd'hui. Nous avons appris les composants de vue plus tôt. Notre article de blog explique principalement les composants dynamiques et les composants intégrés de vue.
1. Composants dynamiques
Dans Vue, de nombreux composants peuvent être montés sur le même point de montage. Pour obtenir une commutation et un rendu dynamiques entre plusieurs composants sur le même point de montage, nous pouvons basculer dynamiquement le rendu via la propriété is du composant de composant intégré. Le composant de liaison, puis nous pouvons décider quel composant doit être rendu en fonction de la valeur de is, ce qui est très pratique.
Nous pouvons approfondir notre compréhension à travers un petit exemple de code simple :
Exemple de code :
<!DOCTYPE html>
<html lang="en">
<head>
<title>组件之间的传递</title>
</head>
<body>
<div id="app">
<h1>小小闲置网</h1>
<input type="radio" name="tab" value="qiubite1" v-model="cfl">王者账号：
<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">估价：
<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>账号</h1>
<input type="text" placeholder="输入你的账号：">
</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>估价：</h1>
<input type="text" placeholder="你心仪卖出的价格：">
</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>
résultat de l'opération :
Nous pouvons voir que la valeur de la valeur des trois boutons est définie sur le nom du composant, la liaison bidirectionnelle des données cfl (punition, dénuée de sens, gâché par vous-même), cliquez sur le bouton, vous pouvez modifier la valeur de la valeur pour mettre à jour la cfl La valeur de ; l'attribut is du composant component lie dynamiquement la valeur dans la cfl, selon cela est de savoir quel composant est rendu.
2. Composants intégrés
Selon les résultats de l'exemple ci-dessus, nous voyons les données d'entrée dans la zone de saisie. Lorsque vous passez à d'autres composants, les données du composant d'origine ne seront pas enregistrées, de sorte que le composant intégré peut envelopper notre composant dynamique, et le composant précédent sera Cache, au lieu de détruire, mettra en cache les composants qui sont rebasculés, afin que l'état des composants soit préservé.
Exemple de code :
<!DOCTYPE html>
<html lang="en">
<head>
<title>组件之间的传递</title>
</head>
<body>
<div id="app">
<h1>小小闲置网</h1>
<input type="radio" name="tab" value="qiubite1" v-model="cfl">王者账号：
<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">估价：
<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>账号</h1>
<input type="text" placeholder="输入你的账号：">
</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>估价：</h1>
<input type="text" placeholder="你心仪卖出的价格：">
</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>
résultat de l'opération :
