vue自訂元件的註冊方式有幾種-前端問答-PHP中文網

vue自訂元件的註冊方式有3種：1、局部註冊，在App的components中註冊自訂元件。 2.全域註冊，在「main.js」中註冊（掛載）自訂元件。 3.在「src/plugin」目錄下建一個和元件名稱一致的資料夾，然後將自訂元件檔案放到這個目錄中，接著在這個目錄中再建一個「index.js」的文件，透過在這個文件裡面寫註冊代碼，將自訂元件註冊成插件。

vue自訂元件的註冊方式有幾種

本教學操作環境：windows7系統、vue3版，DELL G3電腦。

建立專案

透過cmd 執行如下範例指令來初始化我們的Vue 專案

vue create helloworld
cd helloworld
code .
npm run serve

登入後複製

指令執行完成後，專案結構如下圖所示：

vue自訂元件的註冊方式有幾種

接著，我們在src/components 目錄下建立一個自訂的元件splash.vue,範例程式碼如下所示：

<template>
  <div>
    <p>{{ title }}</p>
    <p>{{ message }}</p>
  </div>
</template>
<script>
export default {
  name: "splash",
  props:[&#39;title&#39;],
  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，會出現如下所示的效果：

vue自訂元件的註冊方式有幾種

##註冊成全域元件

如果想將我們的元件註冊成全域元件，共其它所有元件都能使用的話，我們就需要將我們的元件註冊成全域元件。同樣的，我們需要在'main.js' 中註冊我們的全域元件，範例程式碼如下所示：

import Vue from &#39;vue&#39;
import App from &#39;./App.vue&#39;
// 1. 导入自定义组件
import Splash from &#39;./components/Splash.vue&#39;
Vue.config.productionTip = false
// 2. 将自定义组件注册成全局组件
Vue.component(Splash.name, Splash)
new Vue({
  render: h => h(App),
}).$mount(&#39;#app&#39;)

登入後複製

修改

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自訂元件的註冊方式有幾種

#註冊成外掛程式##由於外掛更有彈性，所以我們可以自訂元件註冊成全域元件。依照 Vue 的約定，我們需要將我們的專案結構做一下調整。

在

src/plugin

目錄下建立一個和元件名稱一致的資料夾，然後將我們上面定義的splash.vue 檔案放到這個目錄下面，然後在這個目錄下面再建一個index.js 的文件，透過在這個文件裡面寫註冊程式碼，將我們的自訂元件註冊成插件。範例程式碼如下所示：<div class="code" style="position:relative; padding:0px; margin:0px;"><pre class="brush:js;toolbar:false;">import Splash from &#39;./Splash&#39; export default { install: function (Vue, options) { // 1.获取构造函数 const contructor = Vue.extend(Splash) // 2. 实例化组件对象 const instance = new contructor() // 3. 创建页面元素 const oDiv = document.createElement(&#39;div&#39;) 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; } } }</pre><div class="contentsignin">登入後複製</div></div>修改

main.js

,範例程式碼如下所示：<div class="code" style="position:relative; padding:0px; margin:0px;"><pre class="brush:js;toolbar:false;">import Vue from &#39;vue&#39; import App from &#39;./App.vue&#39; // 1. 导入自定义组件 import Splash from &#39;./plugin/splash/index&#39; Vue.config.productionTip = false // 2. 将自定义组件注册成组件 Vue.use(Splash, { title: &#39;hello world&#39; }) new Vue({ render: h => h(App), }).$mount(&#39;#app&#39;)</pre><div class="contentsignin">登入後複製</div></div>接下來，我們就可以在任何元件中透過呼叫Vue物件的全域方法或實例方法來控制我們的自訂元件，例如，我們可以在

hello-world

這樣使用：<div class="code" style="position:relative; padding:0px; margin:0px;"><pre class="brush:js;toolbar:false;"><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></pre><div class="contentsignin">登入後複製</div></div>執行npm run serve<p>，會出現如下所示的效果：<code>

vue自訂元件的註冊方式有幾種【相關推薦：