Vue フレームワークで開発する場合、よく使用される中間値思考、中間値思考とは、間接属性を介してレンダリングする必要がある値を変更することです。
値を渡すとき、ミットを使用して値を渡す場合、渡された値はbus.on関数内にあり、それを取り出してテンプレート構文に割り当てる必要があります。bus.on関数から値を取得する方法は?
最初に中間値を定義する必要があります
const midvalue = ref()
アイデアは、bus.on渡された値をこの中間値に割り当て、中間値の値をテンプレートのテンプレート構文の値として挿入することです
コードは以下のように表示されます:
<template>
// 把中间值赋值给模板语法 第三步
<div>{
{
midvalue}}</div>
</template>
<script setup>
import {
ref } from 'vue'
import {
bus } from 'mitt.js'
// 创建中间值 第二步
const midvalue = ref()
// 把接收到的值赋值给中间值 第一步
bus.on('事件名',(接收到的值)=>{
midvalue.value = 接收到的值
})
</script>
同様に、div 内のデータが動的に変化する場合、つまり、この div 内のデータに対応する値が複数ある場合、異なるデータを受け入れるために中間値を使用する必要があります。
3 つのボタン、1 つのdiv、ボタンをクリックすると、テンプレートに異なる数値がレンダリングされるため、実装の考え方は、ボタンがクリックされると、バインドされた関数が対応する値を に割り当て、clickそのmidvalue値midvalueをテンプレート構文
なぜこれをしたいのですか？直接レンダリングできませんか？のテンプレート値は固定である
ため、次のようになります。div
<div>{
{ name }}</div>
名前はname変更されないため、名前に対応する値のみを変更できます。次に、中間値を使用してこの値を保持し、プロセスで値を簡単に変更できます。