vue에 사용자 정의 구성 요소를 등록하는 방법에는 세 가지가 있습니다. 1. 부분 등록, 앱 구성 요소에 사용자 정의 구성 요소를 등록합니다. 2. 글로벌 등록, "main.js"에 커스텀 컴포넌트를 등록(마운트)합니다. 3. "src/plugin" 디렉토리에 컴포넌트와 동일한 이름의 폴더를 생성한 후 이 디렉토리에 사용자 정의 컴포넌트 파일을 배치하고 이 디렉토리에 또 다른 "index.js" 파일을 생성합니다. 사용자정의 구성요소를 플러그인으로 등록하기 위한 파일입니다.
이 튜토리얼의 운영 환경: windows7 시스템, vue3 버전, DELL G3 컴퓨터.
cmd를 통해 다음 예제 명령을 실행하여 Vue 프로젝트를 초기화합니다.
vue create helloworld cd helloworld code . npm run serve
명령이 실행된 후 프로젝트 구조는 아래와 같습니다.
다음으로 src를 생성합니다. /comComponents
디렉토리에 사용자 정의 구성 요소 splash.vue
를 생성합니다. 샘플 코드는 다음과 같습니다: src/components
目录下创建一个自定义的组件 splash.vue
,示例代码如下所示:
<template> <div> <p>{{ title }}</p> <p>{{ message }}</p> </div> </template> <script> export default { name: "splash", props:['title'], data: function () { return { message: "组件启动中...", }; }, }; </script>
我们知道,通过 Vue-CLI
创建的项目,vue 会自动为我们创建一个 App.vue
的根组件,用于承载整个应用程序,如果我们在 App 的 components
注册我们的自定义组件,那么它也算一个局部组件,只能应用在 App 这样的一个组件内。注册方式如下所示:
<template> <div id="app"> <img alt="Vue logo" src="./assets/logo.png" /> <!-- 3.应用自定义组件 --> <splash title="hello world"></splash> </div> </template> <script> // 1.导入组件 import Splash from "./components/Splash.vue"; export default { name: "App", components: { // 2.注册局部组件 Splash, }, }; </script> <style> #app { font-family: Avenir, Helvetica, Arial, sans-serif; -webkit-font-smoothing: antialiased; -moz-osx-font-smoothing: grayscale; text-align: center; color: #2c3e50; margin-top: 60px; } </style>
执行 npm run serve
,会出现如下所示的效果:
如果想将我们的组件注册成全局组件,共其它所有组件都能使用的话,我们就需要将我们的组件注册成全局组件。同样的,我们需要在 'main.js' 中注册我们的全局组件,示例代码如下所示:
import Vue from 'vue' import App from './App.vue' // 1. 导入自定义组件 import Splash from './components/Splash.vue' Vue.config.productionTip = false // 2. 将自定义组件注册成全局组件 Vue.component(Splash.name, Splash) new Vue({ render: h => h(App), }).$mount('#app')
修改 HelloWorld.vue
,使用上面已经注册的全局组件,示例代码如下所示:
<template> <div class="hello"> <h1>{{ msg }}</h1> <!-- 应用自定义组件 --> <splash></splash> </div> </template> <script> export default { name: "HelloWorld", props: { msg: String, }, }; </script> <style scoped> .hello { border: 1px dashed #00f; } </style>
修改 App.vue
,使用上面已经注册的全局组件,示例代码如下所示:
<template> <div id="app"> <img alt="Vue logo" src="./assets/logo.png" /> <splash></splash> <hello-world msg="我是子组件"></hello-world> </div> </template> <script> import HelloWorld from "./components/HelloWorld.vue"; export default { name: "App", components: { HelloWorld, }, }; </script> <style> #app { font-family: Avenir, Helvetica, Arial, sans-serif; -webkit-font-smoothing: antialiased; -moz-osx-font-smoothing: grayscale; text-align: center; color: #2c3e50; margin-top: 60px; } </style>
执行 npm run serve
,会出现如下所示的效果:
由于插件更具灵活性,所以我们可以自定义组件注册成全局组件。按照 Vue 的约定,我们需要将我们的项目结构做一下调整。
在 src/plugin
目录下建一个和组件名称一致的文件夹,然后将我们上面定义的 splash.vue 文件放到这个目录下面,然后在这个目录下面再建一个 index.js
的文件,通过在这个文件里面写注册代码,将我们的自定义组件注册成插件。示例代码如下所示:
import Splash from './Splash' export default { install: function (Vue, options) { // 1.获取构造函数 const contructor = Vue.extend(Splash) // 2. 实例化组件对象 const instance = new contructor() // 3. 创建页面元素 const oDiv = document.createElement('div') document.body.appendChild(oDiv) // 4. 将组件挂载到页面元素上 instance.$mount(oDiv) if (options !== null && options.title !== undefined) { instance.title = options.title } // 添加全局方法 Vue.ToggleSplash = function () { instance.isShow = !instance.isShow; } // 添加实例方法 Vue.prototype.$ToggleSplash = function () { instance.isShow = !instance.isShow; } } }
修改 main.js
,示例代码如下所示:
import Vue from 'vue' import App from './App.vue' // 1. 导入自定义组件 import Splash from './plugin/splash/index' Vue.config.productionTip = false // 2. 将自定义组件注册成组件 Vue.use(Splash, { title: 'hello world' }) new Vue({ render: h => h(App), }).$mount('#app')
接下来,我们就可以在 任何组件中通过调用 Vue 对象的全局方法或实例方法来控制我们的自定义组件,比如,我们可以在 hello-world
这样使用:
<template> <div class="hello"> <h1>{{ msg }}</h1> <button @click="toggle1">使用全局方法控制显示或隐藏插件</button> <button @click="toggle2">使用实例方法控制显示或隐藏插件</button> </div> </template> <script> import Vue from "vue"; export default { name: "HelloWorld", props: { msg: String, }, methods: { toggle1: function () { // 通过全局方法来访问自定义组件 Vue.ToggleSplash(); }, toggle2: function () { // 通过实例方法来访问自定义组件 this.$ToggleSplash(); }, }, }; </script> <style scoped> .hello { border: 1px dashed #00f; } </style>
执行 npm run serve
rrreee
Vue-CLI
를 통해 생성된 프로젝트의 경우 vue가 전체 애플리케이션을 호스팅할 수 있도록 App.vue
의 루트 구성 요소를 자동으로 생성한다는 것을 알고 있습니다. 앱 구성 요소
에 있는 사용자 정의 구성 요소를 등록하면 로컬 구성 요소로도 간주되어 App과 같은 구성 요소에만 적용될 수 있습니다. 등록 방법은 다음과 같습니다: rrreee npm run submit
을 실행하면 다음과 같은 효과가 나타납니다:
HelloWorld.vue
를 수정하고 위에 등록된 전역 구성 요소를 사용합니다. 샘플 코드는 다음과 같습니다. 다음과 같습니다. 🎜rrreee🎜App.vue
를 수정하고 위에서 등록한 전역 구성 요소를 사용합니다. 샘플 코드는 다음과 같습니다. 🎜rrreee🎜Execute npm run submit
다음이 표시됩니다. 표시되는 효과: 🎜🎜🎜src/plugin
디렉터리에 컴포넌트와 동일한 이름의 폴더를 생성한 후 위에서 정의한 Splash.vue 파일을 이 디렉터리에 넣은 다음 또 다른 를 생성합니다. index.js 파일에 등록 코드를 작성하여 사용자 정의 구성 요소를 플러그인으로 등록합니다. 샘플 코드는 다음과 같습니다. 🎜rrreee🎜Modify main.js
샘플 코드는 다음과 같습니다. 🎜rrreee🎜다음으로 모든 구성 요소에서 Vue 개체의 전역 메서드 또는 인스턴스 메서드를 호출할 수 있습니다. 예를 들어 사용자 정의 구성 요소를 제어하려면 hello-world
에서 다음과 같이 사용할 수 있습니다. 🎜rrreee🎜 npm run Serve
를 실행하면 다음과 같은 효과가 나타납니다. 🎜 🎜🎜🎜🎜【관련 추천: 🎜vuejs 비디오 튜토리얼🎜, 🎜웹 프론트엔드 개발🎜】🎜위 내용은 Vue 사용자 정의 구성 요소를 등록하는 방법에는 여러 가지가 있습니다.의 상세 내용입니다. 자세한 내용은 PHP 중국어 웹사이트의 기타 관련 기사를 참조하세요!