Prefacio:
En vue3.0, podemos definir una variable en la configuración y enviarla por retorno. La página se obtiene directamente con { {}}, pero necesitamos cambiar el campo definido por nuestra inicialización después de solicitar el fondo para obtener los datos. deberíamos hacer en este caso Bueno, aquí para compartir mi experiencia
Tabla de contenido
2. Encuentre información relevante en línea
1. Comparte el código fuente,
modelo:
<ul>
<li>我是从后台拿到的值：</li>
<li>城市：{
{pageData.list.cityName}}</li>
<li>学校：{
{pageData.list.schoolName}}</li>
<li>姓名：{
{pageData.list.teacherName}}</li>
</ul>js:
setup (props, ctx) {
//页面上的数据
let pageData = reactive({
list:{}
})
//请求后台
let params = {
}
proxy.$api.user.getUerInfo(params).then(res=> {
let code = trimNumber(res.data.code)
if (code === 200) {
let datas = res.data.data
pageData.list = datas
}
})
return {
//数据
pageData
}2. Encuentre información relevante en línea
Hay dos métodos, uno es el método de referencia y el otro es el método reactivo. Personalmente, estas dos cosas me parecen raras. Una es que si se reemplaza por un objeto y hay varias capas, su método .value no es muy amigable, y el primer método de referencia, si se usa para el enlace de datos, se siente inapropiado
setup() {
const aLoading = ref<boolean>(false)
let apps = reactive<Array<any>>([])
const getAllApp = () => {
aLoading.value = true
queryAll()
.then((response: any) => {
if (response.content.length > 0) {
apps = response.content
}
console.log(apps) // Array(2) // 值是拿到了的
}).catch(error => {
console.debug(error)
}).finally(() => {
aLoading.value = false
})
}
onMounted(() => {
getAllApp()
})
return {
aLoading,
apps,
}
},