vue 구성 요소 설명(is 속성의 용법)템 플 릿 탭 교체 작업

4835 단어 vue구성 요소is탭 바 꾸 기
vue 에서 is 의 속성 도입 은 dom 구조 에서 html 를 넣 는 요소 에 제한 이 있 는 문 제 를 해결 하기 위해 서 입 니 다.예 를 들 어 ul 에 li 의 라벨 을 연결 하고 is 의 속성 을 도입 한 후에 이렇게 쓸 수 있 습 니 다.

<div class="language-html">
  <ul> 
    <li is="row"></li> 
  </ul>
</div>
이렇게 하면 dom 구조 가 브 라 우 저의 정상 적 인 렌 더 링 을 확보 하고 부정 확 한 구조 에서 구성 요 소 를 직접 사용 하지 않도록 합 니 다.

<script>
  Vue.component('row', {
    template: '<li>this is a row</li>'
  })
</script>

그림 과 같은 다른 용법:

<!DOCTYPE html>
<html lang="en">
<head>
 <meta charset="UTF-8">
 <title>     v-once  </title>
 <script src="./vue.js"></script>
</head>
<body>
 <div id="app">
 <component :is="type"></component>
 <!-- <child-one v-if="type==='child-one'"></child-one>
 <child-two v-if="type==='child-two'"></child-two> -->
 <button @click="handleBtnClick">change</button>
 </div>
 <script>
 Vue.component("childOne", {
  template: "<div>child one</div>"
 });
 Vue.component("childTwo", {
  template: "<div>child two</div>"
 });
 var vm = new Vue({
  el:"#app",
  data: {
  type: "child-one"
  },
  methods: {
  handleBtnClick: function(){
   this.type = (this.type==="child-one" ? "child-two" : "child-one")
  }
  }
 })
 </script>
</body>
</html>
추가 지식: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 구성 요소 설명(is 속성의 용법)템 플 릿 태그 교체 작업 은 바로 작은 편집 이 여러분 에 게 공유 하 는 모든 내용 입 니 다.참고 하 시기 바 랍 니 다.여러분 들 이 저 희 를 많이 응원 해 주 셨 으 면 좋 겠 습 니 다.
정규 표현 식 사용 예시 상세 설명
Vue 에서 component 태그 해결 프로젝트 구성 요소 화 작업

좋은 웹페이지 즐겨찾기

개발자 우수 사이트 수집

개발자가 알아야 할 필수 사이트 100선 추천 우리는 당신을 위해 100개의 자주 사용하는 개발자 학습 사이트를 정리했습니다
best100-homepage