Vue.js 的 Cascader 組件可以讓用戶方便地從一個(gè)長(zhǎng)的數(shù)據(jù)清單中選擇出自己需要的選項(xiàng)。但要正確地獲取用戶選擇的值，則需要一定程度的了解。以下是一些需要關(guān)注的事項(xiàng)。

首先，在使用 Cascader 時(shí)需要給組件綁定一個(gè) value 屬性，并在 mainOptions 中指定選擇的路徑。例如：

<template>
<div>
<el-cascader
v-model="selectedOptions"
:options="options"
@change="handleChange">
</el-cascader>
</div>
</template>
<script>
export default {
data() {
return {
selectedOptions: [],
options: [{
value: 'zhejiang',
label: '浙江省',
children: [{
value: 'hangzhou',
label: '杭州市',
children: [{
value: 'xihu',
label: '西湖區(qū)'
}, {
value: 'yuhang',
label: '余杭區(qū)'
}]
}]
}]
};
},
methods: {
handleChange(value) {
console.log(value);
}
}
};
</script>

這里的 value 數(shù)組是由選擇的各個(gè)節(jié)點(diǎn)的 value 屬性值組成的數(shù)組。當(dāng)用戶選擇完畢時(shí)，調(diào)用 handleChange 方法進(jìn)行處理。

在實(shí)際使用中，還需要考慮到 Cascader 組件的禁用狀態(tài)、異步加載數(shù)據(jù)、設(shè)置默認(rèn)值等問題。這些可以通過組件的屬性和事件進(jìn)行定制。

總之，Cascader 組件具有很好的選項(xiàng)選擇特性，而正確地獲取用戶選擇的值更可以帶來更好的用戶體驗(yàn)。