Vue 구성 요소 구현 tips 의 총 결

홈 페이지 에 이미 있 는 내용 을 나 는 더 이상 군말 하지 않 고 홈 페이지 에서 직접 보면 된다.여기 서 모 기 는 각 도 를 바 꾸 어 vue 의 구성 요 소 를 설명 하려 고 한다.
구성 요 소 는 말 그대로 상대 적 으로 독립 되 고 여러 번 사용 하 는 기능 을 추상 화하 여 구성 요소 가 되 는 것 입 니 다!만약 에 우리 가 특정한 기능 을 하나의 구성 요소 로 추상 화 하려 면 이 구성 요 소 는 다른 사람 에 게 블랙박스 가 되 어야 한다.그들 은 안에서 어떻게 실현 되 는 지 관심 을 가지 지 않 고 약 정 된 인터페이스 에 따라 호출 하면 된다!
나 는 한 장의 그림 으로 Vue 의 구성 요소 의 구성 을 약간 정리 했다.

구성 요소 에 포 함 된 것 이 매우 많은 것 을 볼 수 있 습 니 다.그리고 아직 열거 되 지 않 은 점 이 많 습 니 다.이 안의 모든 지식 점 은 많은 이 야 기 를 할 수 있 습 니 다.그러나 우 리 는 원 리 는 말 하지 않 고 사용 만 말한다.
우 리 는 tips 창 을 예 로 들 어 다음 구성 요소 의 지식 점 을 종합 적 으로 활용 합 니 다.tips 탄창,거의 모든 프레임 워 크 나 라 이브 러 리 에 탄창 이라는 구성 요소 가 있 습 니 다.탄창 이라는 기능 은 평소에 매우 보편적 이 고 모듈 의 결합 도가 높 기 때 문 입 니 다!
1.인터페이스 약속
우리 가 여기 서 실현 할 수 있 는 탄창 에 사용 할 수 있 는 지식 은 props,event,slot,ref 등 이 있다.여기 서 우 리 는 각 지식 점 이 어떻게 운용 되 는 지 볼 수 있다.

/**
 * modal       
 * @param {string} modal.title      
 * @param {string} modal.text      
 * @param {boolean} modal.showbtn       
 * @param {string} modal.btnText     
 */

 Vue.component('tips', {
  props : ['tipsOptions'],
  template : '#tips',

  data(){
    return{
      show : false
    }
  },

  computed:{
    tips : {
      get() {
        let tips = this.tipsOptions || {};
        tips = {
          title: tips.title || '  ',
          text: tips.text || '',
          showbtn : tips.showbtn || true,
          btnText : tips.btnText || '  '
        };
        // console.log(tips);
        return tips;
      }
    }
  }
})

2.modal 구성 요소 의 실현
tips 구성 요 소 는 상대 적 으로 간단 합 니 다.사용자 에 게 알려 주 는 간단 한 탄 층 으로 만 사 용 됩 니 다.
템 플 릿:

<div class="tips" v-show="show" transition="fade">
  <div class="tips-close" @click="closeTips">x</div>
  <div class="tips-header">
    <slot name="header">
      <p class="title">{{tips.title}}</p>
    </slot>
  </div>
  <div class="tips-body">
    <slot name="body">
      <p class="notice">{{tips.text}}</p>
    </slot>
  </div>
  <div class="tips-footer">
    <a href="javascript:;" rel="external nofollow" rel="external nofollow" v-if="tips.showbtn" @click="yes" >{{tips.btnText}}</a>
  </div>
</div>

템 플 릿 은 구 조 를 세 부분 으로 나 누 었 고 제목,내용 과 조작 구역 으로 나 누 었 다.props 로 문자열 을 전달 할 수도 있 고 slot 로 맞 춤 형 제작 할 수도 있 습 니 다.
tips 스타일:

.tips {
  position: fixed;
  left: 10px;
  bottom: 10px;
  z-index: 1001;
  -webkit-overflow-scrolling: touch;
  max-width: 690px;
  width: 260px;
  padding: 10px;
  background: #fff;
  box-shadow: 0 0 10px #888;
  border-radius: 4px;
}
.tips-close{
  position: absolute;
  top: 0;
  right: 0;
  width: 20px;
  height: 20px;
  line-height: 20px;
  text-align: center;
}
.tips-header{
  text-align: center;
  font-size: 25px;
}

구성 요소 내 방법:

methods:{
  closeTips(){
    this.show = false;
  },

  yes : function(){
    this.show = false;
    this.$emit('yes', {name:'wenzi', age:36}); //   yes  
  },

  showTips(){
    var self = this;
    self.show = true;

    setTimeout(function(){
      // self.show = false;
    }, 2000)
  }
}

3.tips 구성 요소 호출
우선 구성 요 소 를 렌 더 링 하기 시작 합 니 다:

<div class="app">
  <a href="javascript:;" rel="external nofollow" rel="external nofollow" @click="showtips">  </a>
  <tips :tips-options="tipsOptions" ref="dialog" @yes="yes" v-cloak >
    <h3 slot="header">    </h3>
    <div slot="body">
      <p>hello world</p>
      <p>wenzi</p>
    </div>
  </tips>
</div>

표시 단 추 를 누 르 면 tips 를 보 여 줍 니 다:

var app = new Vue({
  el : '.app',

  data : {
    tipsOptions : {
      title : 'tip'
    }
  }

  methods:{
    //              
    yes(args){
      // console.log( args );
      alert( JSON.stringify(args) );
    },

    //   tips
    showtips(){
      // console.log( this.$refs );
      this.$refs.dialog.showTips();
    }
  }
})

4.총화
이 간단 한 tips 구성 요소 에서 우 리 는 props 로 파 라 메 터 를 전달 하고$emit 로 파 라 메 터 를 밖으로 전달 하 며 slot 슬롯 으로 콘 텐 츠 를 맞 추 는 것 을 실현 합 니 다.
주의해 야 할 것 은 구성 요소 props 는 단 방향 바 인 딩 입 니 다.즉,부모 구성 요소 의 속성 이 변 할 때 하위 구성 요 소 는 해당 하 는 데이터 변 화 를 받 을 수 있 지만 반대로 오류 가 발생 할 수 있 습 니 다.즉,하위 구성 요소 에서 props 가 보 내 온 데 이 터 를 수정 하여 부모 구성 요소 속성 을 수정 하 는 목적 을 달성 할 수 없습니다.하위 구성 요소 가 부모 구성 요소 의 상 태 를 수정 하지 않 는 것 을 방지 하기 위해 서 입 니 다.
또한,부모 구성 요소 가 업 데 이 트 될 때마다 하위 구성 요소 의 모든 prop 는 최신 값 으로 업 데 이 트 됩 니 다.이것 은 하위 구성 요소 내부 에서 prop 를 바 꾸 지 말 아야 한 다 는 것 을 의미한다.만약 네가 이렇게 한다 면,Vue 는 콘 솔 에서 경 고 를 할 것 이다.하위 구성 요소 에서 수정 이 필요 하 다 면 이 두 가지 방법 으로 대응 할 수 있 습 니 다.
부분 변 수 를 정의 하고 prop 값 으로 초기 화 합 니 다.

props: ['initialCounter'],
data: function () {
 return { counter: this.initialCounter }
}

계산 속성 을 정의 하고 prop 의 값 을 처리 하 며 되 돌려 줍 니 다.

props: ['size'],
computed: {
 normalizedSize: function () {
  return this.size.trim().toLowerCase()
 }
}

물론 이것 은 단일 페이지 에서 구성 요소 의 실현 일 뿐 더 복잡 한 구성 요소 가 추 후 에 도 실 현 될 것 입 니 다.
이상 이 바로 본 고의 모든 내용 입 니 다.여러분 의 학습 에 도움 이 되 고 저 희 를 많이 응원 해 주 셨 으 면 좋 겠 습 니 다.