Vue가 데이터를 추가했지만 업데이트하지 않으면 어떻게 해야 하나요?

Vue가 데이터를 추가하지만 업데이트하지 않는 문제에 대한 해결 방법: 1. "this.$set(target, key, value);" 또는 "Vue.set(target, key, value)"를 사용하여 속성을 추가합니다. . 렌더링 시 함수에서 여러 슬롯을 동적으로 사용하고 해당 슬롯에 값을 전달합니다.

이 튜토리얼의 운영 환경: Windows 10 시스템, Vue 버전 3, Dell G3 컴퓨터.

vue가 데이터를 추가했지만 업데이트하지 않으면 어떻게 해야 하나요?

Vue 데이터가 실시간으로 업데이트되지 않는 문제 해결(데이터는 변경되지만 데이터가 실시간으로 업데이트되지 않음)

1. Vue를 개발에 사용하는 과정에서 발생할 수 있는 상황 :

vue 인스턴스를 생성한 후 데이터가 다시 할당되면 뷰에 자동으로 업데이트되지 않는 경우가 있습니다.

반응형 개체에 속성을 추가하고 이 새 속성도 반응형이며 뷰를 트리거하는지 확인하세요. 업데이트. Vue는 일반적인 새 속성을 감지할 수 없기 때문에 반응형 개체에 새 속성을 추가하는 데 사용해야 하며 vue의 내장 메서드를 사용해야 합니다

2. Vue.set()은 반응적으로 데이터를 추가하고 수정합니다

이번에 우리는 Vue.set()에 필요한 매개변수가 무엇인지 알아야 합니다. 공식 API: https://cn.vuejs.org/v2/api/#Vue-set

Call 메서드: Vue.set(target, key, value) 또는 this.$set(target, key, value);

target: 변경될 데이터 소스(객체 또는 배열일 수 있음)

key: 변경될 특정 데이터

value: 재할당된 값,

호출: this.$set(target, key, value);

보충 지식: vue RenderscopedSlots

render 슬롯의 일반적인 기본 사용법은 다음과 같습니다: this.$slots.default에는 여러 개의 슬롯을 사용하고 싶은 경우. 슬롯 이름은 고유하게 지정해야 합니다.

렌더링 함수에서 여러 슬롯을 동적으로 사용하고 슬롯에 값을 전달합니다

1. 내 비즈니스 논리:

세 가지 구성 요소를 사용합니다.

구성 요소 A는 구성 요소 B를 호출하고, 구성 요소 B는 구성 요소 C를 호출하고, 구성 요소 C는 자체 캡슐화된 렌더링 구성요소입니다.

구성 요소 A는 자체 맞춤 슬롯을 구성 요소 C에 삽입하려고 합니다. 구성 요소 C는 맞춤 콘텐츠를 렌더링하고 구성 요소 C의 값을 구성 요소 B와 구성 요소 A에 전달합니다. 구성 요소 B는 구성 요소 C의 더 큰 레이어입니다. 캡슐화

A 구성 요소 호출 B 구성 요소

<index-grid>
     <div
      slot="name"
      slot-scope="field"
      class="check-link"
      @click="rowLinkClick"
     >
      <span>{{ field.field.rowData.name }}</span>
     </div>
</index-grid>

A 구성 요소는 B 구성 요소를 참조하고, 슬롯 범위는 B 구성 요소에서 전달된 solt 값을 받으며, Slot="name"은 슬롯 이름을 지정하는 것입니다.

B 구성 요소의 호출 C 구성 요소의 렌더링 기능

<sub-grid ref="indexGridSub">
   <span
    v-for="(item, index) in fields"
    :key="index"
    slot="name"
    slot-scope="field"
   >
    <slot name="name" :field="field"></slot>
   </span>
 
  </sub-grid>

B 구성 요소 범위의 슬롯은 A 구성 요소의 슬롯과 동일한 값을 갖는 경우에만 A 구성 요소의 사용자 지정 슬롯을 허용할 수 있습니다.

필드는 C 구성 요소에서 전달됩니다. value

C 구성요소는 렌더링 함수입니다

h(
     "td",
     {
      style: { width: field.width + "px" },
      class: { borderRight },
      // 作用域插槽格式
      // { name: props => VNode | Array<VNode> }
      scopedSlots: this.$scopedSlots.name,
      // 如果组件是其他组件的子组件，需为插槽指定名称
      slot: &#39;name&#39;
     },
     this.$scopedSlots.name({
      field: field,
      rowData: rowData,
     })
    );

C 구성요소에 의해 전달된 값은 {field: '', rowData: ''}

권장 학습: "vue.js video tutorial"

위 내용은 Vue가 데이터를 추가했지만 업데이트하지 않으면 어떻게 해야 하나요?의 상세 내용입니다. 자세한 내용은 PHP 중국어 웹사이트의 기타 관련 기사를 참조하세요!