import hello from './components/hello.vue'  
 
    // export default {} 是固定寫法 為了導出App組件
    export default {
      //此處定義了私有組件！
      components: { hello },

2.全局注冊

（1）在main.js文件中，引入 import '組件對象' from '文件路徑'

（2）組件注冊：Vue.component ('組件名'，'組件對象')

import Vue from 'vue'
import App from './App.vue'
//導入全局組件 world.vue
import world from '@/components/world.vue'
//注冊 world.vue 組件
Vue.component('world', {
    //可直接縮寫為 world
    'world': world
})
//-------以下為此全局組件（world.vue）的代碼---------
 
<template>
    <div id="world">
        world vue.js
    </div>
</template>
<script>
export default {
    name: 'world'
} 
</script>

（3）最終效果

3.使用組件的步驟：

（1）在App.vue（即父組件）中 script 標簽中使用 import 語法導入需要的組件

代碼示例：

import hello from '@/component/hello.vue'

（2）接著使用 component 節(jié)點注冊組件

代碼示例：

export default {
    data{},
    component: {
        // 'hello':hello簡寫為hello
        hello
}
 
}

（3）以標簽形式使用注冊好的組件

代碼示例：

<template>
    <div id='box'>
        <hello></hello>
    </div>
</template>

感謝閱讀！

以下為App.vue、main.js 和 html 的完整代碼：

<template>
  <div id="app">
    <button id="post" v-on:click="post">{{message1}}</button>
    <button id="get" @click="get">{{message2}}</button>
    <hello></hello>
    <world></world>
  </div>
</template>
 
<script>
//此處導入局部組件
import hello from './components/hello.vue'  
import World from './components/world.vue'
 
    // export default {} 是固定寫法 為了導出App組件
    export default {
      //此處定義了私有組件！
      components: { hello, World },
 
      // 導出的App組件名使用 name:'xxx' 定義
      name: 'App',
 
      // 在Vue組件中，data不能和以前一樣一以對象的形式，
      // 而應該使用函數的形式，在 return 中可以定義數據
      // 屬性之間用逗號隔開
      data () {
        return {
          message1 : '發(fā)送post請求',
          message2 : '發(fā)送get請求'
        }
      },
 
      methods: {
        post() {
          console.log('發(fā)送了post請求')
        },
        get() {
          console.log('發(fā)送了get請求')
        }
      }
 
    }
</script>
 
<style lang="less">
  button {
    display: block;
    margin-top: 10px;
  }
</style>

import Vue from 'vue'
import App from './App.vue'
//導入全局組件 world.vue
import world from '@/components/world.vue'
//注冊 world.vue 組件
Vue.component('world', {
    //可直接縮寫為 world
    'world': world
})
Vue.config.productionTip = false
 
new Vue({
    render: h => h(App),
}).$mount('#app')

<!DOCTYPE html>
<html lang="">
<head>
    <meta charset="utf-8">
    <meta http-equiv="X-UA-Compatible" content="IE=edge">
    <meta name="viewport" content="width=device-width,initial-scale=1.0">
    <link rel="icon" href="<%= BASE_URL %>favicon.ico" rel="external nofollow" >
    <title>
        <%= htmlWebpackPlugin.options.title %>
    </title>
</head>
<body>
    <noscript>
      <strong>We're sorry but <%= htmlWebpackPlugin.options.title %> doesn't work properly without JavaScript enabled. Please enable it to continue.</strong>
    </noscript>
    <div id="app"></div>
    <world></world>
</body>
</html>

到此這篇關于vue組件component的注冊與使用的文章就介紹到這了,更多相關vue組件component內容請搜索腳本之家以前的文章或繼續(xù)瀏覽下面的相關文章希望大家以后多多支持腳本之家！

您可能感興趣的文章: