vue 는 외부 에서 구성 요소 내부 변 수 를 수정 하 는 값 을 실현 합 니 다.

1.먼저 정 의 된 변수 에 데 이 터 를 가 져 오 는 방법:
여기 제 가 사용 하 는 것 은 vuex 입 니 다.
우선 프로젝트 의 src 폴 더 아래 에 이 디 렉 터 리 를 만 듭 니 다:

그 다음 에 index.js 에서 homedatas.js(데 이 터 를 가 져 온 js)를 공유 하여 페이지 가 데 이 터 를 얻 을 수 있 도록 해 야 합 니 다.
다음은 index.js 코드 입 니 다.

다음은 homedatas 에서 데 이 터 를 얻 었 습 니 다.다음은 homedatas.js 코드 입 니 다.

이상 은 데 이 터 를 가 져 오 는 절차 입 니 다.그 다음 에 페이지 에서 이 데 이 터 를 가 져 오 는 것 입 니 다.
가장 중요 한 것 은 인용 입 니 다.vuex 와 인용 구성 요 소 를 참조 하 는 것 입 니 다.

다음 페이지 의 jascript 에 있 는 export default 에서 구성 요 소 를 정의 하고 데 이 터 를 가 져 옵 니 다:

이 방식 으로 페이지 에서 구성 요 소 를 참조 한 다음 탭 을 사용자 정의 하여 구성 요소 에 데 이 터 를 전달 합 니 다.

2.하위 구성 요소 에서 부모 구성 요소 가 전달 하 는 데 이 터 를 가 져 옵 니 다:
props 에서 속성 을 정의 합 니 다.이것 은 이전에 페이지 사용자 정의 탭 에 설 치 된 세 가지 속성 입 니 다.각각 구성 요소 의 다른 부분 을 제어 하고 각 속성의 유형,기본 값 과 테스트 함 수 를 정의 합 니 다.주의 하 세 요.테스트 함 수 는 반드시 하나의 값 을 반환 해 야 합 니 다.그렇지 않 으 면 페이지 가 잘못 보고 되 고 테스트 함수 의 매개 변 수 는 전 달 된 값 입 니 다.

scrolldatas 는 하나의 배열 입 니 다.그 다음 에 이 배열 의 요 소 를 순환 적 으로 옮 겨 다 니 며 배열 의 값 은 페이지 에 표 시 됩 니 다.페이지 요 소 는 배열 요소 의 변화 에 따라 달라 집 니 다.

그 다음 에 다른 두 변 수 는 어떻게 구성 에서 인용 되 었 습 니까?
우선 저 는 테스트 함수 에서 이 들 어 오 는 값 이 요구 에 부합 되 지 않 는 다 고 판단 하 겠 습 니 다.만약 에 부합 되 지 않 으 면 테스트 함 수 를 실행 하지 않 는 것 이 기본 값 입 니 다.요구 에 부합 되면 함 수 를 실행 하고 함수 에서 기본 값 을 바 꾸 어 해당 하 는 사용자 정의 변 수 를 부여 합 니 다.

그 다음 에 호출 함수 입 니 다.호출 함수 에 매개 변 수 를 입력 합 니 다.이 매개 변 수 는 현재 값 이 처음에 var 의 초기 값 이 아니 라 나중에 테스트 함수 에서 테스트 함수 의 조건 에 부합 되 기 때문에 나중에 부여 한 값 입 니 다(window.onload 는 페이지 가 불 러 올 때 까지 실 행 됩 니 다).

그 다음 에 이 변 수 를 사용 해 야 하 는 함수 에서 매개 변 수 를 전달 해 야 합 니 다(speed,이 speed 의 값 은 바로 위 changespeed 의 값 입 니 다).

그래서 잠시 후에 그 조작 을 말 하면 데 이 터 를 가 져 오 는 곳 에서 값 을 수정 하면 페이지 효과 가 달라 집 니 다.구성 요소 에서 아무것도 수정 할 필요 가 없습니다.

보충 지식:vue 에서 component 에 전 달 된 속성의 값 을 어떻게 수정 하고 template 에 할당 합 니까?
기록 해서 기억 을 강화 하 다
밖에서 option-item-template 템 플 릿 을 참조 하여 값 을 전송 한 다음 component 에서 값 을 수정 한 다음 template 에 값 을 부여 합 니 다.
다음은 밖에서 인용 한 표기 법 이다.

템 플 릿 부분의 코드

Vue.component('option-item-template', {
  props: ['item', 'optionitems', 'answer','hassub'],
  data: function () {
    return {
      classname: {
        "choose-content": true,
        "stan-answer": false
      }
    }
  },
  watch: {
    hassub: function (newValue, oldValue) {// hassub                 
      this.changeStanAnswer(newValue, this.answer);
    }
  },
  mounted: function () {//    /      
    this.changeStanAnswer(this.hassub,this.answer);
  },
  methods: {
    changeStanAnswer: function (sub, answer) {
      if (sub && (answer.indexOf(this.optionitems.chooseName) != -1)) {
        this.classname = {
          "choose-content": true,
          "stan-answer": true
        };
      } else {
        this.classname = {
          "choose-content": true,
          "stan-answer": false
        };
      }
    }
  },
  template: '<li class="mui-table-view-cell" v-if="optionitems.selectName || optionitems.selectImage">'
    + '<label :class="classname">'
    + '<input v-if= "item.data.itemType==2" type="checkbox" :name="item.data.tiKuId" v-bind:data-number="item.data.shiJuanNumber" data-type="checkbox" :value="optionitems.chooseName" />'
    + '<input v-else type="radio" :name="item.data.tiKuId" v-bind:data-number="item.data.shiJuanNumber" :value="optionitems.chooseName" data-type="radio" />'
    + '<span class= "choose-btn" >{{optionitems.chooseName}}</span>'
    + '<span class="choose-text">'
    + '{{optionitems.selectName}}'
    + '![         ]()'
    + '</span>'
    + '</label></li>'
});

위의 코드 에서 보 듯 이 들 어 오 는 값 hassub,optionitems.choose Name 의 값 에 따라 마지막 으로 불 러 올 스타일 과 class 의 값 을 맞 춥 니 다.
hassub 의 값 은 변 할 수 있 으 며,변 경 된 값 에 따라 다른 스타일 을 불 러 오 려 면 watch 에서 hassub 의 값 을 감청 해 야 합 니 다.값 이 바 뀌 었 을 때 class 의 값 도 바 꿔 야 합 니 다.
이 vue 는 외부 에서 구성 요소 내부 변 수 를 수정 하 는 값 을 실현 하 는 것 이 바로 작은 편집 이 여러분 에 게 공유 하 는 모든 내용 입 니 다.참고 가 되 고 저 희 를 많이 사랑 해 주 셨 으 면 좋 겠 습 니 다.