序文
これは Vue の 5 分間学習のシリーズ全体です. Vue の小さな知識をすべて読むのに毎日 5 分かかります. 前の編集者が Vue のコンポーネントの関連知識をまとめました. ブロガーのブログにアクセスして、あなたのお気に入り. ブログを読むのは簡単ではありません. 誰もがいいねをしてくれることを願っています. あなたのすべてのいいねは、このブロガーにとって大きなサポートです.
さて、これ以上苦労することなく、今日の短い 5 分間の学習時間に入りましょう. vue のコンポーネントについては以前に学びました. 私たちのブログ投稿では、主に vue の動的コンポーネントと組み込みコンポーネントについて説明しています.
1.動的コンポーネント
Vue では、同じマウント ポイントにマウントできるコンポーネントが多数あります.同じマウント ポイント上の複数のコンポーネント間で動的な切り替えとレンダリングを実現するために、組み込みコンポーネント コンポーネントの is プロパティを介してレンダリングを動的に切り替えることができます。バインディング コンポーネントです。次に、is の値に応じてどのコンポーネントをレンダリングするかを決定できます。これは非常に便利です。
少し単純なコード例を通して理解を深めることができます:
サンプルコード:
<!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>
操作結果:
3つのボタンの値の値がコンポーネントの名前に設定されていることがわかります.cfl（罰、無意味、自分でめちゃくちゃ）データの双方向バインディング、ボタンをクリックすると、値を変更できますcfl を更新する値の ; コンポーネント コンポーネントの is 属性の値は、cfl の値を動的にバインドします。
2. 内蔵コンポーネント
上記の例の結果によると、入力ボックスに入力データが表示されます. 他のコンポーネントに切り替えると、元のコンポーネントのデータは保存されないため、組み込みコンポーネントは動的コンポーネントをラップできます.前のコンポーネントは、破棄する代わりにキャッシュされ、コンポーネントの状態が保持されるように、スイッチバックされたコンポーネントをキャッシュします。
コード例:
<!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>
操作結果:
