Vue 사용자 정의 동적 구성 요소 예제에 대한 자세한 설명

Vue에는 다양한 종류의 UI 컴포넌트 라이브러리가 있지만 너무 많은 컴포넌트 라이브러리가 우리의 개발 요구 사항을 충족할 수 없기 때문에 우리는 필요에 따라 플러그인을 작성해야 합니다. 아래에서는 JS 컴포넌트를 사용자 정의하는 방법을 소개하겠습니다. 두 밤. 관심 있는 친구들은 함께 살펴보세요

iview, element-ui 등 vue 기반의 UI 컴포넌트 라이브러리가 많이 있습니다. 그러나 때로는 이러한 구성 요소 라이브러리가 우리의 개발 요구 사항을 충족하지 못할 수도 있습니다. 이때 우리는 플러그인을 직접 작성해야 합니다.

첫 번째 밤나무를 가져가자

vue-cli로 프로젝트 디렉터리를 설정한 후 그림과 같이 src/comComponents 아래에 새 폴더를 만들어 작성하려는 플러그인을 넣습니다.

index 컴포넌트를 .vue에 작성합니다. 코드는 다음과 같습니다.

index.js에 index.vue의 설치 메소드를 작성하고, Vue.comComponent를 사용하여 컴포넌트를 등록합니다. 코드는 다음과 같습니다.

다음으로 기본을 추가해야 합니다. 방금 작성한 index.js 파일을 main.js로 가져와 Vue.use를 통해 사용합니다.

완료되었습니다. 그런 다음 app.vue에서 직접 사용하면 그림과 같이 해당 구성 요소가 표시되는 것을 볼 수 있습니다.

이때 클릭 이벤트를 사용자 정의하여 우리에게 전달할 수도 있습니다. 플러그인은 그림과 같이 props 속성을 통해 이벤트를 얻을 수 있습니다.

페이지가 적용된 것을 볼 수 있습니다:

Vue. 구성요소(id, [정의])는 구성요소를 등록하거나 획득하는 데 사용됩니다. Vue.component(id, [definition])用于注册或获取组件。

Vue.use(plugin)用于安装 Vue.js 插件。如果插件是一个对象，必须提供 install 方法。如果插件是一个函数，它会被作为 install 方法。install 方法调用时，会将 Vue 作为参数传入。当 install 方法被同一个插件多次调用，插件将只会被安装一次。

举第二个栗子

我们再建一个文件夹，如图：

我们要写一个组件，能够显示外部传进来的内容，并在3秒后自动消失，代码如下：

接下来我们要在index.js里使用构造器来创建它，如图：

依旧在默认的main.js里引用刚刚的js文件，并加入到Vue实例上，这样我们就可以直接通过this.$seconddemo()来调用了，代码如下：

import SecondDemo from './components/global/seconddemo/index'Vue.prototype.$seconddemo = SecondDemo

在app.vue里使用它，发现插件加载成功了，如图：

Vue.extend(options)

두 번째 밤을 가져가자

외부에서 전달받은 내용을 표시하고 3초 후에 자동으로 사라지는 컴포넌트를 작성하고 싶습니다. 코드는 다음과 같습니다.

다음으로 index.js의 생성자를 사용하여 생성해야 합니다. 그림과 같이:

여전히 참조하세요 기본 main.js js 파일의 이전 항목을 Vue 인스턴스에 추가하면 this.$seconddemo()를 통해 직접 호출할 수 있습니다. 코드는 다음과 같습니다.

app.vue에서 사용하여 그림과 같이 플러그인이 성공적으로 로드되었음을 확인했습니다.

Vue.extend(options)는 "하위 클래스"를 생성하는 데 사용되는 Vue의 생성자입니다.

커스텀 컴포넌트의 통일된 관리

위 내용은 Vue 사용자 정의 동적 구성 요소 예제에 대한 자세한 설명의 상세 내용입니다. 자세한 내용은 PHP 중국어 웹사이트의 기타 관련 기사를 참조하세요!