Vue 컴포넌트 구현 팁 요약

이 글은 Vue 컴포넌트를 구현하기 위한 팁을 자세하게 요약해서 소개하는 글인데 편집자가 꽤 좋다고 생각해서 지금 공유하고 참고용으로 올려보겠습니다. 편집자를 따라 살펴보겠습니다. 모두에게 도움이 되기를 바랍니다.

컴포넌트는 이름에서 알 수 있듯이 여러 번 사용되는 비교적 독립적인 기능을 컴포넌트로 추상화하는 것입니다! 특정 기능을 구성 요소로 추상화하려면 이 구성 요소를 다른 사람들을 위한 블랙 박스로 만들어야 합니다. 구현 방법은 신경 쓸 필요가 없으며 합의된 인터페이스에 따라 호출하기만 하면 됩니다.

Vue의 컴포넌트 구성을 간략하게 요약하기 위해 그림을 사용했습니다:

컴포넌트에 포함된 것들이 꽤 많고, 아직 나열되지 않은 점도 많이 있다는 것을 알 수 있습니다. 하나의 지식 포인트에 대해 말할 수 있습니다. 그러나 여기서는 원칙이 아니라 사용법에 대해서만 이야기하고 있습니다.

다음 구성 요소의 지식 포인트를 종합적으로 적용하기 위한 팁 팝업 창을 예로 들어 보겠습니다. 팁 팝업 창의 경우, 거의 모든 프레임워크 또는 클래스 라이브러리에는 팝업 창 구성 요소가 있습니다. 팝업 창 기능은 일반적으로 매우 일반적이고 모듈은 고도로 분리되어 있기 때문입니다!

1. 인터페이스 규칙

여기서 구현하는 팝업 창에는 소품, 이벤트, 슬롯, 참조 등이 포함됩니다. 여기에서 각 지식 포인트가 어떻게 사용되는지 확인할 수도 있습니다.

/**
 * 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. 모달 구성 요소 구현

tips 구성 요소는 구현이 비교적 간단하며 사용자에게 메시지를 표시하는 간단한 팝업 레이어로만 사용됩니다.

템플릿:

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

구조는 제목, 내용, 작업 영역의 세 부분으로 구분됩니다. 여기서는 props를 사용하여 문자열을 전달하거나 슬롯을 사용하여 사용자 정의할 수 있습니다.

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 구성 요소를 호출합니다.

먼저 구성 요소 렌더링을 시작합니다.

<p 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>
    <p slot="body">
      <p>hello world</p>
      <p>wenzi</p>
    </p>
  </tips>
</p>

나중에 팁 표시 ：

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. 요약

이 간단한 팁 구성 요소에서는 props를 사용하여 매개 변수를 전달하고 $emit를 사용하여 매개 변수를 외부로 전달하며 슬롯을 사용하여 콘텐츠를 맞춤 설정합니다.

컴포넌트 props는 단방향 바인딩이라는 점에 유의해야 합니다. 즉, 상위 컴포넌트의 속성이 변경되면 하위 컴포넌트는 해당 데이터 변경 사항을 받을 수 있지만 결과적으로 오류가 발생합니다. 즉, 상위 컴포넌트의 속성을 수정하려는 목적을 달성하기 위해 props에 의해 전달된 데이터를 하위 컴포넌트에서 수정할 수 없습니다. 이는 하위 구성 요소가 실수로 상위 구성 요소의 상태를 수정하는 것을 방지하기 위한 것입니다.

또한 상위 구성 요소가 업데이트될 때마다 하위 구성 요소의 모든 props가 최신 값으로 업데이트됩니다. 즉, 하위 구성 요소 내부의 소품을 변경하면 안 됩니다. 이렇게 하면 Vue가 콘솔에 경고를 표시합니다. 하위 구성 요소를 정말로 수정해야 하는 경우 다음 두 가지 방법을 사용할 수 있습니다.

로컬 변수를 정의하고 prop 값으로 초기화합니다.

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

계산된 속성을 정의하고 prop 값을 처리하고 반품 .

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

물론 이는 단일 페이지에 구성 요소를 구현한 것일 뿐입니다. 앞으로는 더 복잡한 구성 요소도 구현할 예정입니다.

관련 권장 사항:

PHP 개발 팁 요약

css 관련 팁

python 팁

위 내용은 Vue 컴포넌트 구현 팁 요약의 상세 내용입니다. 자세한 내용은 PHP 중국어 웹사이트의 기타 관련 기사를 참조하세요!