So binden Sie Daten im Setup in Vue

Es gibt drei Möglichkeiten, Setup-Daten in Vue zu binden: 1. Refs: Verwenden Sie das Ref-Attribut, um Elementreferenzen an Setup-Variablen zu binden. 2. V-Modell: Zwei-Wege-Bindung von Eingabeelementwerten und Setup-Variablen . Benutzerdefinierte Attribute: Erstellen Sie das Attribut und binden Sie es an die Setup-Variable. Um auf den Wert zuzugreifen, verwenden Sie this.attributeName.

Setup-Daten in Vue binden

Verwenden Sie in Vue die Funktion setup(), um Logik und Komponentenstatus zu definieren. Um diese Daten an die Komponentenvorlage zu binden, können Sie die folgenden Methoden verwenden: setup() 函数定义逻辑和组件状态。为了将这些数据绑定到组件模板，可以使用以下方法：

1. refs

• 使用 ref 属性将元素或组件引用绑定到 setup 中的变量。
• 访问绑定的元素或组件，使用 this.$refs.<ref-name>。

示例：

<code class="vue"><template>
  <input ref="myInput" />
</template>

<script>
import { ref } from 'vue';

export default {
  setup() {
    const inputRef = ref(null);
    return { inputRef };
  },
  mounted() {
    console.log(this.$refs.myInput.value);
  }
};
</script></code>

2. v-model

• 使用 v-model 指令绑定输入元素值到 setup 中的变量。
• v-model 将双向绑定输入值和数据变量。

示例：

<code class="vue"><template>
  <input v-model="inputText" />
</template>

<script>
import { ref } from 'vue';

export default {
  setup() {
    const inputText = ref('');
    return { inputText };
  }
};
</script></code>

3. 自定义属性

• 创建自定义属性并将其绑定到 setup 中的变量。
• 访问绑定的值，使用 this.attributeName

1. refs

• Verwenden Sie das Attribut ref, um Element- oder Komponentenreferenzen zu binden Setup-Variable.

Um auf gebundene Elemente oder Komponenten zuzugreifen, verwenden Sie this.$refs.<ref-name>. 🎜🎜🎜Beispiel: 🎜🎜

<code class="vue"><template>
  <div :my-value="myValue"></div>
</template>

<script>
import { ref } from 'vue';

export default {
  setup() {
    const myValue = ref('');
    return { myValue };
  }
};
</script></code>

🎜🎜2. v-model🎜🎜

• Verwenden Sie die v-model-Direktive, um Eingabeelementwerte an Variablen im Setup zu binden. 🎜
• v-model bindet Eingabewerte und Datenvariablen in zwei Richtungen. 🎜🎜🎜🎜Beispiel: 🎜🎜

  <code>console.log(this.myValue); // 输出从setup绑定的值</code>

  🎜🎜3. Benutzerdefinierte Eigenschaften🎜🎜
  • Erstellen Sie benutzerdefinierte Eigenschaften und binden Sie sie an Variablen im Setup. 🎜
  • Um auf den gebundenen Wert zuzugreifen, verwenden Sie this.attributeName. 🎜🎜🎜🎜 Beispiel: 🎜🎜rrreeerrreee

Das obige ist der detaillierte Inhalt vonSo binden Sie Daten im Setup in Vue. Für weitere Informationen folgen Sie bitte anderen verwandten Artikeln auf der PHP chinesischen Website!