パブリック テンプレート コンポーネントのカプセル化の目的
パブリック テンプレート コンポーネントのカプセル化により、ビジネスのパブリック部分のコードの再利用が実現され、不要な繰り返しの開発が削減され、開発作業が軽減され、ホイールを繰り返し作成することの恥ずかしさが回避されます。
包装に必要な技術ポイント
- props: 一方向の下方バインディング データ フローとデータ検証は、親と子の props の間で形成されます。
- $emit: 親コンポーネントをトリガーするメソッド。
- slot: この要素は、コンポーネント テンプレートのコンテンツ配布スロットとして機能します。スロット要素自体が置き換えられます。
- 公開テンプレート コンポーネントのグローバル登録: 公開テンプレート コンポーネントを使用するための前提条件。
代替アップグレード技術ポイント
- watch: アナウンス テンプレート コンポーネントに渡されたデータをリッスンします。
- ref: 公開テンプレート コンポーネントを実行するメソッド
公開テンプレート コンポーネントのカプセル化
1. 公開テンプレート コンポーネントのカプセル化
<template>
<div class="tzc_group_bt">
<slot name="content" >
<div class="tzc_group_header">
<i :class="myvalue.icon" :style="{'color':myvalue.color}"></i>
<p :style="{'color':myvalue.color2,'border-bottom':`2px solid ${myvalue.color}`}">{
{
myvalue.name }}</p>
</div>
<div class="tzc_group_more" @click="OnS()" :style="{'color':myvalue.color3,'background':myvalue.color}">{
{
myvalue.more}}</div>
</slot>
</div>
</template>
<script>
export default {
props: {
myvalue: {
default: {
}
},
},
data() {
return {
};
},
mounted() {
},
methods: {
OnS() {
this.$emit('onOpen');
}
},
};
</script>
2. 公開テンプレート コンポーネント (main.js または main.ts) のグローバル登録
//通过Vue.component进行全局注册
Vue.component('my-component-name', {
// ... 选项 ...
})
3. 公開テンプレート コンポーネントの使用
<cp_pub_more :myvalue="myvalue" @onOpen="onGlist" >
<!-- 插入自定义内容插槽，传值、方法失效 -->
<template v-slot:content>
<div>插入自定义内容</div>
</template>
</cp_pub_more>
この記事はオリジナルであり、オリジナルであることは容易ではありません. 転載する必要がある場合は、著者に連絡して許可を得てください.