머리말:
vue3.0에서는 설정에서 변수를 정의하고 반환으로 보낼 수 있습니다. 페이지는 {
{}}로 직접 가져 오지만 데이터를 가져 오기 위해 배경을 요청한 후 초기화에서 정의한 필드를 변경해야합니다. 이 경우에해야 할 일 음, 여기 내 경험을 공유하기 위해
목차
1. 소스 코드 공유,
주형:
js :
2. 온라인에서 관련 정보 찾기
두 가지 방법이 있는데 하나는 ref 방법이고 다른 하나는 리 액티브 방법인데이 두 가지가 개인적으로 이상하다고 생각합니다. 하나는 객체로 대체되고 여러 개의 레이어가 있으면 그의 .value 방법은 그다지 좋지 않다는 것입니다. 친화적이고 첫 번째 ref 방법은 데이터 연결에 사용되면 부적절하다고 느낍니다.
1. 소스 코드 공유,
주형:
<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. 온라인에서 관련 정보 찾기
두 가지 방법이 있는데 하나는 ref 방법이고 다른 하나는 리 액티브 방법인데이 두 가지가 개인적으로 이상하다고 생각합니다. 하나는 객체로 대체되고 여러 개의 레이어가 있으면 그의 .value 방법은 그다지 좋지 않다는 것입니다. 친화적이고 첫 번째 ref 방법은 데이터 연결에 사용되면 부적절하다고 느낍니다.
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,
}
},