vue.js에서 props가 매개변수를 전달하는 방법에 대한 자세한 설명

vue.js에서 매개변수를 전달하는 props에 대한 관련 지식과 문제 해결 방법에 대한 자세한 분석을 제공합니다.

이 문서에서는 데모 예제를 사용하여 매개 변수 전달 소품의 사용에 대한 자세한 분석과 발생한 문제에 대한 솔루션을 제공합니다. 다음은 전체 내용입니다.

얼마 전에 저는 vue를 사용하여 각 페이지에 정보를 표시하는 테이블이 필요한 백엔드 관리 시스템을 구축했습니다. 당연히 재사용 목적을 달성하기 위해 테이블을 추출하여 공용 구성 요소로 만들고 렌더링을 위해 여러 페이지의 데이터를 전달하는 방법을 생각했습니다.

데모 주소

1. 문제 발견

상위 컴포넌트에서 테이블 컴포넌트로 전달해야 하는 데이터에는 테이블의 콘텐츠 데이터, tableData, 테이블의 페이지 데이터가 포함됩니다.

<p>
 <my-table :table-data="tableData" :page-info="pageInfo" id="myTable"></my-table>
</p>

여기서 tableData는 테이블에 표시해야 하는 모든 데이터 객체로 구성된 배열인 Array 객체입니다. 그리고 pageInfo는 테이블 페이지 정보를 포함하는 Object 개체입니다. 다음과 같이 상위 구성 요소에서 두 개의 데이터 쌍을

tableData：［］，
pageInfo: {
 current: 1, // 当前是第几页
 total: 100, // 数据对象的总数
 size: 20 // 每页显示的数量
}

형식으로 초기화합니다. 공식 문서의 지침에 따르면 prop은 단방향 바인딩이므로 하위 구성 요소 내에서 prop을 변경하면 안 됩니다. prop의 데이터를 수정하고 싶은 충동을 느끼는 이유는 주로 prop이 초기값으로 전달된 후 하위 구성 요소가 이를 로컬 데이터로 사용하려고 하기 때문입니다. 이 상황에 대한 공식 설명은 지역 변수를 정의하고 prop 값으로 초기화하는 것입니다.

props: ['tableData', 'pageInfo'],
data() {
 return {
  tData: this.tableData,
  page: this.pageInfo
 }
}

그런 다음 공식 문서에 따르면 상위 구성 요소가 업데이트될 때마다 하위 구성 요소의 모든 prop이 다음으로 업데이트됩니다. 최신 값. tableData 및 pageInfo의 정보는 api를 통해 서버에서 비동기적으로 가져옵니다.

{
 error: 0,
 msg: "调用成功.",
 data: {
  restrictioninfo: [...],
  total: 42
 }
}

따라서 데이터를 가져오면 상위 구성 요소는 하위 구성 요소에 전달된 값을 변경해야 합니다.

me.tableData = Json.data.restrictioninfo;
me.pageInfo.total = Json.data.total;

논리적으로 말하면 하위 구성 요소는 서버에서 반환된 값으로 업데이트되어야 하지만 하위 구성 요소 페이지의 총 개수는 업데이트되었지만 초기화 중에 테이블 데이터는 여전히 빈 배열입니다. (검은색 물음표???)

.

2. 할당 및 바인딩

먼저 데이터에서 문제가 있는 위치를 찾아야 하므로 문제를 찾기 위해 데모를 만들었습니다.

먼저 상위 컴포넌트와 하위 컴포넌트에 있는 각 요소의 초기값을 살펴보세요.

그런 다음 상위 컴포넌트의 배열에 대한 참조만 변경되면 해당 요소의 props 배열을 볼 수 있습니다. 그에 따라 하위 구성 요소가 변경되고 하위 구성 요소의 바인딩이 실제로 그에 따라 변경되지 않았습니다

따라서 이 단계에서 문제가 있음을 알 수 있습니다

props: ['tableData', 'pageInfo'],
data() {
 return {
  tData: this.tableData,
  page: this.pageInfo
 }
}

그리고 문제의 근본 원인을 파악하려면, vue 문서에서 심층적인 응답성 원칙을 파악해야 합니다.

"Vue 인스턴스의 데이터 옵션에서 Vue는 이 개체의 모든 속성을 탐색하고 Object.defineProperty를 사용하여 이러한 모든 속성을 getter/setter로 변환합니다.", "각 구성 요소 인스턴스에는 해당 감시자 인스턴스 개체가 있습니다. , 구성 요소 렌더링 중에 속성을 종속성으로 기록한 다음 종속성 setter가 호출될 때 다시 계산하도록 감시자에게 알리므로 관련 구성 요소가 업데이트됩니다. "문서에는 Vue가 양방향으로 바인딩된다는 것이 간단하게 이해됩니다. 데이터 옵션의 vm.$data.a와 DOM의 vm.a, 즉 둘 중 하나가 변경되면 다른 것도 변경됩니다. Vue 소스 코드에서는 defineReactive$$1 함수로 구현됩니다:

그러나 하위 섹션에서는 Object.defineProperty의 get 및 set 메서드가 주로 양방향 바인딩을 달성하는 데 사용됩니다. 하위 컴포넌트에서는 pros 데이터와 하위 컴포넌트의 $data가 다음과 같은 방식으로 연결됩니다.

tData: this.tableData

Vue 소스 코드를 쿼리해 보면 this.tableData와 tData 사이에 할당만 있음을 알 수 있습니다. "=" 관계

위의 initData 함수는 컴포넌트가 빌드될 때 실행되므로 생성 중에 한 번만 실행됩니다. 이것이 공식 문서에 "초기 값으로 전달"이라고 표시된 이유입니다. 한 번만 실행되기 때문입니다. 구성 요소가 빌드되면 this.tableData와 tData 사이에는 관계가 없습니다. 하나의 변경 사항으로 인해 다른 항목이 변경되지 않습니다. 물론, 이 진술은 정확하지 않습니다. 왜냐하면 위에서 우리는 상위 구성 요소에 의해 전달된 합계를 동적으로 변경하고 하위 구성 요소도 "동시에" 변경되기 때문입니다. 무슨 일이 일어나고 있는 걸까요? ?

3. 참조 유형으로 인한 아티팩트

물론 이 문제를 해결하려면 공식 문서부터 시작해야 합니다. 문서에 다음과 같은 팁이 있습니다.

这里就需要理解引用类型的概念，引用数据类型值指保存在堆内存中的对象。也就是，变量中保存的实际上的只是一个指针，这个指针指向内存中的另一个位置，该位置保存着对象。访问方式是按引用访问。例如一个js对象a,他在内存中的存储形式如下图所示：

var a = new Object();

当操作时，需要先从栈中读取内存地址，然后再延指针找到保存在堆内存中的值再操作。

a.name = 'xz';

引用类型变量赋值，本质上赋值的是存储在栈中的指针，将指针复制到栈中未新变量分配的空间中，而这个指针副本和原指针指向存储在堆中的同一个对象；赋值操作结束后，两个变量实际上将引用同一个对象。因此，在使用时，改变其中的一个变量的值，将影响另一个变量。

var b = a;

在了解了引用类型之后，我们在来看看上文提到的动态改变传入子组件前后内存中的情况：

me.tableData = Json.data.restrictioninfo;
me.pageInfo.total = Json.data.total;
========================================
props: ['tableData', 'pageInfo'],
data() {
 return {
  tData: this.tableData,
  page: this.pageInfo
 }
}

首先对tableData的改变是改变了其引用的指针，而对pageInfo则改变了其中一个属性的值，因此动态改变前：

动态改变后：

这样就解释了为什么子组件页面的总数更新了，但table数据依然是初始化时的空数组。因为引用类型的存在，我们动态改变父组件传入的total,子组件也"随之"改变了。

上面是我整理给大家的，希望今后会对大家有帮助。

相关文章：

在jQuery中如何实现点击DIV触发点击CheckBox

使用JS如何实现点击复选框修改显示状态

在Vue中标准的处理方法（详细教程）

위 내용은 vue.js에서 props가 매개변수를 전달하는 방법에 대한 자세한 설명의 상세 내용입니다. 자세한 내용은 PHP 중국어 웹사이트의 기타 관련 기사를 참조하세요!