vue.js组件应用-优快云博客

本文链接：https://blog.youkuaiyun.com/weixin_63152500/article/details/138197793

前言

结合上一章VMMV设计模式，今天的目的事全面了解Vue3组件的相关概念，掌握组件之间的通信以及如何封装一个可复用的组件
了解什么是单文件组件SFC，以及脚手架的使用和底层实现机制，对工程化有一定的认知

一、什么是组件

1、组件概念

组件是独立于其他组件,可以在不同的项目或应用中复用。从而可以减少开发成本和提升效率，同时也方便维护和管理。

2、组件的基本使用方式

1)、组件的命名方式及规范

在Vue.js中，组件通常使用XxxYyy大驼峰风格命名，或者使用小写字母加短横线xxx-yyy风格命名，调用组件时<xxx-yyy>

<!DOCTYPE html>
<html lang="en">
<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">
    <title>Document</title>
    <script src="./vue.global.js"></script>
</head>
<body>
    <div id="app">
        <test-demo></test-demo>
    </div>
    <script>
        let app=Vue.createApp({
     
            data(){
     
                return {
     }
            }
        })
        app.component('TestDemo',{
     
            template:`
            <div>hello world</div>
            <div>{
      {message}}</div>
            `,
            data() {
     
                return {
     
                    message: 'world hello'
                }
            }
        })
        let vm=app.mount(`#app`);
    </script>
</body>
</html>

2)、根组件与普通组件

根组件中的template使用形式，普通组件的优先级要比根组件的低

<body>
    <div id="app">
        <div>我是根组件一</div>
        <test-demo></test-demo>
    </div>
    <script>
        let RootApp = {
     
            data() {
     
                return {
     }
            },
            template: `
               <div>我是根组件二</div>
            `,
        }
        let TestDemo={
     
            template: `
            <div>我是组件三</div>
            `,
        }
        let app=Vue.createApp(RootApp)
        app.component('TestDemo',TestDemo)
        let vm = app.mount(`#app`)
    </script>
</body>

3)、全局组件与局部组件

全局组件指的事可以在整个Vue应用的任何位置使通过Vue.component('tagName', options)进行定义，而局部组件只能在定义它们的父组件中使用，通过Vue实例的components选项进行定义
注意：Vue中在使用局部组件时，组件

使用全局组件

<body>
    <div id="app">
        <test-global></test-global>
        <test-part></test-part>
    </div>
    <script>
        let TestPart = {
     
            template: `
            <div>hello world</div>
            `,
        }
        let TestGlobal = {
     
            template: `
            <div>world hello</div>
            `
        }
        let RootApp = {
     
            data() {
     
                return {
     }
            },
        }
        let app = Vue.createApp(RootApp)
        // 全局组件
        app.component('TestGlobal', TestGlobal)
        app.component('TestPart'