집 > 기사 > 웹 프론트엔드 > Vue를 사용하여 사용자 정의 전역 구성 요소를 만드는 방법

Vue를 사용하여 사용자 정의 전역 구성 요소를 만드는 방법

亚连원래의: 2018-06-21 17:56:421592검색

지난 이틀 동안 Vue.js를 공부했는데, 컴포넌트에 대한 지식이 많고 매우 중요하다고 느꼈습니다. 따라서 이 글에서는 주로 Vue에서 사용자 정의 글로벌 컴포넌트를 구현하는 방법을 소개합니다. 기사는 샘플 코드를 통해 매우 잘 소개되어 있으며 누구나 vue를 배우거나 사용할 수 있는 특정 참고 학습 가치가 있습니다. 필요한 친구는 편집자를 따라 함께 배울 수 있습니다.

머리말

가끔 개발을 하다 보면 플러그인을 직접 작성하고, 자체 플러그인을 사용하고 싶을 때가 있는데, 그게 강한 성취감을 줍니다. 오늘은 오랫동안 저를 괴롭히던 문제를 해결했습니다. 나중에 참고할 수 있도록 지금 녹음하겠습니다.

관련 지식 포인트는 Vue.js 공식 웹사이트 튜토리얼에서 플러그인을 사용하는 것입니다. 방법은 다음과 같습니다.

제가 직면한 첫 번째 문제는 사용자 정의된 구성 요소를 여러 번 호출해야 한다는 것입니다. 프로젝트의 다른 구성 요소와 이전 솔루션은 필요한 위치를 인용하는 것뿐이었습니다. 이는 의심할 여지 없이 많은 코드 중복을 추가합니다. Vue.js의 일부 UI 프레임워크를 사용할 때 프로젝트 항목 파일에서 플러그인을 가져온 다음 Vue.use('플러그인 이름')만 따르면 된다는 것을 알았습니다. 이러한 방식으로 이 프레임워크의 구성 요소와 메서드를 프로젝트 전체에서 사용할 수 있습니다.

정보를 참고한 결과, Custom Component에서는 설치 메소드를 제공해야 한다는 것을 알았습니다

import sideblockComponent from &#39;./sideBlock&#39;
const defaultComponentName = &#39;sidebar&#39;

const Sidebar = {
 install(Vue, options = {}) {
 const componentName = options.componentName || defaultComponentName //提供可选的组件名
 Vue.component(componentName, sideblockComponent)
 }
}
export default Sidebar

이렇게 작성한 컴포넌트를 소개한 다음, 객체를 생성하고 설치 메소드를 포함시킨 후 Vue.comComponent()를 사용합니다. 메소드는 Vue 전역 컴포넌트로 등록되어 있으며 최종적으로 import default는 이 객체를 내보냅니다.

이제 가장 중요한 단계가 완료되었으므로 다음 단계가 가장 중요한 단계입니다.

방금 만든 컴포넌트를 프로젝트 엔트리 파일에 도입하고, Vue.use(도입된 컴포넌트)를 통해 플러그인을 사용해야 합니다. Vue.component()方法注册成Vue全局组件，最后export default导出这个对象。

到此最关键的步骤已经做好，接下来是最最关键的步骤。

我们需要在项目的入口文件中引入刚刚做好的组件，并且通过Vue.use(引入的组件)来使用插件。

到此，一个全局Vue组件就弄好了。我们在提供install方法的同时也可以通过Vue.$emit()的方法来触发组件中的方法，但最近在使用Element UI时发现他们组件中的方法一般都是通过Vue.$refs()

이 시점에서 전역 Vue 구성 요소가 준비되었습니다. 설치 메소드를 제공하는 동시에 Vue.$emit() 메소드를 통해 구성요소의 메소드를 트리거할 수도 있습니다. 그러나 최근 Element UI를 사용할 때 해당 구성요소의 메소드가 다음과 같은 것을 발견했습니다. 일반적으로 Vue.$refs()를 통해 트리거합니다. 구체적인 이유는 향후 연구로 남겨둔다.

vue $refs 기본 사용법

<p id="app">
<input type="text" ref="input1"/>
<button @click="add">添加</button>
</p>

<script>
new Vue({
  el: "#app",
  methods:{
  add:function(){
    this.$refs.input1.value ="22"; //this.$refs.input1 减少获取dom节点的消耗
    }
  }
})
</script>

일반적으로 DOM 요소를 얻으려면 document.querySelector(".input1")가 필요합니다. dom 노드를 얻은 다음 input1의 값을 가져옵니다.

하지만 ref로 바인딩한 후에는 더 이상 dom 노드를 얻을 필요가 없습니다. input1을 위의 입력에 직접 바인딩한 다음 $refs에서 호출할 수 있습니다.

그런 다음 javascript에서 다음과 같이 호출하세요. this.$refs.input1 이렇게 하면 DOM 노드를 얻는 데 드는 소비를 줄일 수 있습니다.

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

Vue를 사용하여 사용자 정의 전역 구성 요소를 만드는 방법

관련 기사