JS 파일에서 Vue 구성 요소를 가져오는 방법

2137 단어 JSvue구성 요소
1. 배경
최근에 프로젝트를 쓸 때 이런 요구를 만났다.
  • js 파일 utils.js 을 봉인하고 구성 요소 my-component.vue 에서 이 js 파일을 인용했습니다.
  • utils.js 파일에는 my-component.vue 및 data 작업이 필요한 함수가 있습니다.
    • 이해하기 편리하도록 상술한 js 파일과 구성 요소 이름은 실제 프로젝트의 이름이 아니라 예시일 뿐입니다.
    2. 사고방식
    호출 함수를 통해 구성 요소의 실례this를 응용된 js 파일에 전달합니다.
    3. 디렉토리 구조
    
src/
├── App.vue
├── assets
├── main.js
├── components
└── views
  └── demo
    ├── my-component.vue
    └── utils.js
    4. 코드 구현methods에서 하나의 변수와 함수를 정의합니다. 이 변수는 구성 요소 실례 utils.js 를 저장하는 데 사용되고, 이 함수는 구성 요소 실례 this 를 수신하는 데 사용됩니다.
    utils.js
    
//  js vue （this）
let vm = null

const sendThis = ( _this )=> {
  vm = _this
}

export default {
  sendThis, //  
  description: ' ',
  getData() {
    console.log(vm) //  
    console.log(vm.userProfile) //  data
  },
  callMethod() {
   vm.clearForm() //  methods
  }
}
    this에 도입my-component.vue 하고 갈고리 함수에서 utils.jsutils.js 방법을 호출하여 sendThis을 전달하면 된다.
    my-component.vue
    
<template>
 <div class="my-component"></div>
</template>

<script>
import utils from './utils'

export default {
 name: 'MyComponent',
 data() {
  return {
   userProfile: ''
  }
 },
 mounted() {
  //  this   js  
  utils.sendThis(this);
 },
 methods: {
  //   utils.js  
  clearForm() {
   //  
  },
  //   utils.js   description
  showMsg() {
   console.log(utils.description)
  }
 }
}
</script>
    5. 다른 생각
    또 하나의 사고방식이 있다.
    일부 속성과 방법을 vue 실례 원형에 마운트하면 자연히 어떤 js 파일에서 vue 실례를 얻을 수 있다.
    다음은 JS 파일에서 Vue 구성 요소를 얻는 방법에 대한 상세한 내용입니다. JS 파일에서 Vue 구성 요소를 얻는 방법에 대한 더 많은 자료는 저희의 다른 관련 글을 주목해 주십시오!
    오토레이아웃이 자동 설정하는 조건, 고유 콘텐츠 크기(Intrinsic Content Size)
    신규 프로젝트 준비 - 1. 셋업

    좋은 웹페이지 즐겨찾기

    개발자 우수 사이트 수집

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