代碼倉庫：跳轉(zhuǎn)
本博客對應分支：03

一、全局組件

Vue 3 中的全局組件是在應用程序中全局注冊的組件，可以在任何地方使用，而不需要在每個組件中都單獨注冊。

1.創(chuàng)建全局組件

在components目錄下創(chuàng)建全局組件MyGlobalComponent.vue：

<!-- components/MyGlobalComponent.vue -->
<template>
    <div>This is my global component</div>
</template>
  
<script>
export default {
    name: 'MyGlobalComponent'
};
</script>

2.在main.js中注冊全局組件

import { createApp } from 'vue';
import App from './App.vue';

const app = createApp(App);

// 注冊全局組件
import MyGlobalComponent from './components/MyGlobalComponent.vue';
app.component('MyGlobalComponent', MyGlobalComponent);

app.mount('#app');

3.使用全局組件

在App.vue中嘗試使用我們定義和注冊的全局組件：

<!-- App.vue -->
<template>
  <div id="app">
    <!-- 使用全局組件 -->
    <MyGlobalComponent ></MyGlobalComponent>
    <HelloWorld />
  </div>
</template>

<script>
import HelloWorld from './components/HelloWorld.vue';

export default {
  name: 'App',
  components: {
    HelloWorld
  }
};
</script>

• 效果：

二、局部組件

在 Vue 3 中，局部組件是指在單個組件內(nèi)部注冊和使用的組件。這意味著局部組件只能在其父組件內(nèi)部使用，而無法在其他組件中直接使用。要在 Vue 3 中創(chuàng)建一個局部組件，可以在父組件的 components 選項中注冊它，然后在父組件的模板中使用它。

1.創(chuàng)建局部組件

在components目錄下創(chuàng)建局部組件MyLocalComponent.vue：

<!-- components/MyLocalComponent.vue -->
<template>
    <div>
        <h2>這是局部組件</h2>
        <p>我只能在父組件內(nèi)部使用</p>
    </div>
</template>
  
<script>
export default {
    name: 'MyLocalComponent'
};
</script>
  

2.在另一個組件中注冊、使用局部組件

<!-- App.vue -->
<template>
  <div id="app">
    <!-- 使用全局組件 -->
    <MyGlobalComponent></MyGlobalComponent>
    <!-- 使用局部組件 -->
    <MyLocalComponent></MyLocalComponent>
    <HelloWorld />
  </div>
</template>

<script>
// 引入并注冊局部組件
import HelloWorld from './components/HelloWorld.vue';
import MyLocalComponent from './components/MyLocalComponent.vue';

export default {
  name: 'App',
  components: {
    HelloWorld,
    MyLocalComponent
  }
};
</script>

• 效果：

三、Props

在 Vue 3 中，props 是用于從父組件向子組件傳遞數(shù)據(jù)的機制。通過 props，父組件可以向子組件傳遞數(shù)據(jù)，子組件可以接收并使用這些數(shù)據(jù)。

1.定義一個子組件

在components目錄下創(chuàng)建一個子組件ChildComponent.vue：

我們定義了一個名為 message 的 prop，并使用了 props 的驗證功能。我們指定了它的類型為 String，并且設(shè)置為必需的（required: true）。這意味著父組件在使用 ChildComponent 時必須傳遞一個名為 message 的字符串類型的數(shù)據(jù)。

<!-- ChildComponent.vue -->
<template>
    <div>
      <h2>子組件</h2>
      <p>{{ message }}</p>
    </div>
  </template>
  
  <script>
  export default {
    props: {
      message: {
        type: String,
        required: true
      }
    }
  };
  </script>
  

2.定義一個父組件

在components目錄下創(chuàng)建一個子組件ParentComponent.vue：

在父組件中，我們使用了 v-bind 或者簡寫的 : 語法將 parentMessage 數(shù)據(jù)傳遞給了 ChildComponent 的 message prop。這樣，parentMessage 的值就會被傳遞到 ChildComponent 中，并在子組件中使用。

<!-- ParentComponent.vue -->
<template>
  <div>
    <h1>父組件</h1>
    <ChildComponent :message="parentMessage" />
  </div>
</template>

<script>
import ChildComponent from './ChildComponent.vue';

export default {
  components: {
    ChildComponent
  },
  data() {
    return {
      parentMessage: '這是來自父組件的消息'
    };
  }
};
</script>

3.效果

為了便于在頁面上展示，我們在App.vue中注冊ParentComponent為局部組件：

<!-- App.vue -->
<template>
  <div id="app">
    <!-- 使用全局組件 -->
    <MyGlobalComponent></MyGlobalComponent>
    <!-- 使用局部組件 -->
    <MyLocalComponent></MyLocalComponent>
    <HelloWorld />
    <ParentComponent></ParentComponent>
  </div>
</template>

<script>
// 引入并注冊局部組件
import HelloWorld from './components/HelloWorld.vue';
import MyLocalComponent from './components/MyLocalComponent.vue';
import ParentComponent from './components/ParentComponent.vue';

export default {
  name: 'App',
  components: {
    HelloWorld,
    MyLocalComponent,
    ParentComponent
  }
};
</script>

• 效果：

文章來源地址http://www.zghlxwxcb.cn/news/detail-802612.html

到了這里，關(guān)于兩周掌握Vue3（三）：全局組件、局部組件、Props的文章就介紹完了。如果您還想了解更多內(nèi)容，請在右上角搜索TOY模板網(wǎng)以前的文章或繼續(xù)瀏覽下面的相關(guān)文章，希望大家以后多多支持TOY模板網(wǎng)！