vue組件component的注冊與使用詳解

更新時(shí)間：2022年08月04日 12:33:24 作者：游小北

組件是Vue是一個(gè)可以重復(fù)使用的Vue實(shí)例, 它擁有獨(dú)一無二的組件名稱,它可以擴(kuò)展HTML元素,以組件名稱的方式作為自定義的HTML標(biāo)簽，這篇文章主要介紹了vue組件component的注冊與使用,需要的朋友可以參考下

1.什么是Vue組件

（1）定義

組件是Vue是一個(gè)可以重復(fù)使用的Vue實(shí)例, 它擁有獨(dú)一無二的組件名稱,它可以擴(kuò)展HTML元素,以組件名稱的方式作為自定義的HTML標(biāo)簽。

因?yàn)榻M件是可復(fù)用的Vue實(shí)例, 所以它們與new Vue() 接收相同的選項(xiàng)

例如 data, computed、watch、methods以及生命周期鉤子等。僅有的例外是像el這樣根實(shí)例特有的選項(xiàng)。把一些公共的模塊抽取出來,然后寫成單獨(dú)的的工具組件或者頁面,在需要的頁面中就直接引入即可。

（2）父子關(guān)系

組件在封裝好之后不存在父子關(guān)系，彼此相互獨(dú)立，在嵌套使用時(shí)才存在父子關(guān)系。

2.Vue組件使用（注冊方式）

1.局部注冊（私有組件注冊）

通過 component 節(jié)點(diǎn)注冊的是私有子組件

在父組件文件中：

（1）引入組件語法如下：

import '組件對象' from 'URL'

（2）導(dǎo)出組件語法如下：

export default { }

（3）代碼演示：

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

2.全局注冊

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

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

import Vue from 'vue'
import App from './App.vue'
//導(dǎo)入全局組件 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 標(biāo)簽中使用 import 語法導(dǎo)入需要的組件

代碼示例：

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

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

代碼示例：

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

（3）以標(biāo)簽形式使用注冊好的組件

代碼示例：

<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>
//此處導(dǎo)入局部組件
import hello from './components/hello.vue'  
import World from './components/world.vue'
 
    // export default {} 是固定寫法 為了導(dǎo)出App組件
    export default {
      //此處定義了私有組件！
      components: { hello, World },
 
      // 導(dǎo)出的App組件名使用 name:'xxx' 定義
      name: 'App',
 
      // 在Vue組件中，data不能和以前一樣一以對象的形式，
      // 而應(yīng)該使用函數(shù)的形式，在 return 中可以定義數(shù)據(jù)
      // 屬性之間用逗號(hào)隔開
      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'
//導(dǎo)入全局組件 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>

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

您可能感興趣的文章: