Vue中引用變量是我們在開發過程中常用的操作之一，它能幫助我們更好地管理和傳遞數據。在Vue中，我們主要使用兩種方式來引用變量：props和data。

props是Vue中父組件向子組件傳遞數據的方式。在父組件中，我們可以通過在子組件標簽上綁定屬性來傳遞數據，而在子組件中，我們就可以通過props來獲取父組件傳遞過來的數據。

// 父組件
<template>
<div>
<child-component :name="name" :age="age" />
</div>
</template>
<script>
import ChildComponent from './child-component';
export default {
name: 'ParentComponent',
data() {
return {
name: '張三',
age: 26
}
},
components: {
ChildComponent
}
}
</script>
// 子組件
<template>
<div>
<p>姓名：{{ name }}</p>
<p>年齡：{{ age }}</p>
</div>
</template>
<script>
export default {
name: 'ChildComponent',
props: {
name: String,
age: Number
}
}
</script>

在父組件中，我們通過在子組件標簽上通過“:屬性名”來綁定屬性。在子組件中，我們通過聲明props來定義要接收的屬性和類型，從而獲取父組件傳遞過來的數據，并在模板中使用。

另一種方式是通過使用data來定義組件內部的數據。在組件中，我們可以通過this關鍵字來獲取data中定義的數據，從而在模板中使用。

<template>
<div>
<p>計數器：{{ count }}</p>
<button @click="increment">點擊增加1</button>
</div>
</template>
<script>
export default {
name: 'Counter',
data() {
return {
count: 0
}
},
methods: {
increment() {
this.count++;
}
}
}
</script>

在這個例子中，我們定義了一個叫做count的變量，并在模板中使用。我們也可以通過methods中的方法來修改這個變量，從而實現計數器的遞增操作。

除了以上兩種方式外，我們還可以使用computed屬性來引用變量，這個屬性允許我們根據組件中的數據計算出一個新的值，并返回它。computed屬性的值可以像普通變量一樣在模板中使用。

<template>
<div>
<p>姓名：{{ fullName }}</p>
</div>
</template>
<script>
export default {
name: 'User',
data() {
return {
firstName: '張',
lastName: '三'
}
},
computed: {
fullName() {
return this.firstName + ' ' + this.lastName;
}
}
}
</script>

在這個例子中，我們定義了一個computed屬性來計算用戶的全名，并在模板中使用。

總的來說，Vue中引用變量的方式有很多種，我們需要根據實際需求來選擇最合適的方式。無論是通過props傳遞數據，使用data定義變量，還是使用computed計算屬性，都能幫助我們更好地管理數據，從而提高代碼的可讀性和可維護性。