Vue의 믹스인 속성에 대한 자세한 설명

이 글은 주로 Vue의 믹스인 속성에 대한 자세한 설명을 소개하고 참고자료를 제공합니다.

우선 공식 홈페이지 https://vuejs.org/v2/guide/mixins.html

을 주시고 오늘은 프로젝트를 개발할 때 라벨의 속성을 바꿔야 하는데, 왜냐하면 라벨에 여러 곳이 있기 때문입니다. 변경이 필요한 프로젝트(비즈니스 로직도 마찬가지)라 한 군데만 변경하고 메소드를 추가할 수 있는 방법이 없을까 고민하다가 결국 공식 홈페이지를 보다가 이 속성을 찾았습니다.

다음은 제 -mixin.js 파일입니다

import {mapGetters, mapMutations, mapActions} from 'vuex'  
export const playlistMixin = { 
 computed: { 
  ...mapGetters([ 
   'playList' 
  ]) 
 }, 
 mounted() { 
  this.handlePlaylist(this.playList) 
 }, 
 activated() { 
  this.handlePlaylist(this.playList) 
 }, 
 watch: { 
  playList(newVal) { 
   this.handlePlaylist(newVal) 
  } 
 }, 
 methods: { 
  handlePlaylist() { 
   throw new Error('component must implement handlePlaylist method') 
  } 
 }  
}

이 파일은 객체를 노출하고 있는데 이 객체는 컴포넌트와 매우 유사합니다. 즉, 컴포넌트의 js 코드 부분이 유사합니다.

이 .js 파일이 하는 일은 라이프사이클 동안과 playList 변수가 변경될 때 handlerPlaylist 함수를 트리거하는 것이지만, 이 함수의 로직은 변경되는 각 구성요소에 구현되어 있습니다. 믹스인 사용법을 살펴보겠습니다.

import {playlistMixin} from 'common/js/mixin' //引入Mixin 
 export default { 
  mixins: [playlistMixin], 
  methods: { 
    handlePlaylist (playlist) { 
    let bottom = playlist.length > 0 ? '60px' : '' 
    this.$refs.recommend.style.bottom = bottom 
    this.$refs.scroll.refresh() 
   }, 
  } 
 }

사용된 컴포넌트에서 이렇게 호출합니다.

mixins: 이 속성은 배열이므로 여러 minxin 파일을 로드할 수 있습니다.

handlePlaylist 메소드는 비즈니스 로직을 완성하는 것입니다. 따라서 this.handlePlaylist() 메소드는 컴포넌트의 라이프사이클에 추가됩니다.

위 내용은 모두를 위해 제가 정리한 내용입니다. 앞으로 모든 사람에게 도움이 되기를 바랍니다.

관련 기사:

Vue2.0 이벤트 방송 및 수신(관찰자 모드)

vue2.0에서 스타일/css 로더 설치 방법

iview 테이블 높이 동적 설정 방법

위 내용은 Vue의 믹스인 속성에 대한 자세한 설명의 상세 내용입니다. 자세한 내용은 PHP 중국어 웹사이트의 기타 관련 기사를 참조하세요!