25. [组件]Vue3中的局部组件

和全局组件相对应的就是局部组件,你可以把局部组件看成一个变量,然后在使用的地方注册这个组件,才可以使用。

局部组件的最大好处就是只有在使用的时候,才会耗费系统资源,不像全局组件一样,一直都存在。你现在看这段话可能不能很好的理解,下面通过代码,来讲解一下什么是局部组件。

新建文件

打开VSCode,新建一个文件Demo25.html,基础代码如下

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>Document</title>
    <script src="https://cdn.bootcdn.net/ajax/libs/vue/3.0.2/vue.global.js"></script>
</head>

<body>
    <div id="app"></div>
</body>
<script>
    const app = Vue.createApp({
        template: `<h2>mybj123.com</h2>`
    })
    const vm = app.mount("#app")
</script>
</html>

这时候可以打开浏览器看一下是否可以显示出正常内容。如果可以正常显示,说明一切正常。接下来就可以编写一个局部组件了。

创建局部组件

注册局部组件,其实你可以理解成就是声明一个变量,这个变量是一个对象,所以最外层我们使用大括号{}(花括号),然后里边和使用Vue.CreateApp( )时传递的参数是一样的。

const counter = {
    data() {
        return {
            count: 0
        }
    },
    template: `<div>{{count}}<button @click="count++">增加1</button></div>`
}

注册完组件后,我们还不能直接使用,如果直接使用会报错。这时候要作的是在vue.CreateApp()方法里进行注册。

组测局部组件

注册局部组件的方法很简单,直接用components属性来声明就可以了。

const app = Vue.createApp({
    components: { counter },
    template: `
        <h2>JSPang.com</h2>
        <counter />
    `
})

但是这只是简写方法,正确的写法应该是components: { counter:counter }, ,其实就是给组件起个名字,你甚至可以叫做mybj

const app = Vue.createApp({
        components: { mybj: counter },
        template: `
        <h2>mybj123.com</h2>
        <mybj />

注册好后,你就可以直接在模板中使用了。需要注意的是,局部变量也是拥有独立性的,所以可以进行复用。

局部组件的编写有一些不成文的潜规则,下面介绍一下。

局部组件使用大驼峰命名法

有时候我们的组件名字会比较长,比如写一个youYuXi组件。

const youYuXi = {
    template: `<h2>尤雨溪</h2>`
}

现在变量的名字有大小写,这时候在组测组件时,要使用这种形式(用-切割单词)。

const app = Vue.createApp({
    components: { 
        mybj: counter, 
        'you-yu-xi': youYuXi 
    },
    template: `
    <h2>JSPang.com</h2>
    <you-yu-xi />
    <mybj />

`

产生这种问题是因为一个矛盾点,就是变量中不能使用-,而组件调用确实可以的。所以为了区分组件,在定义局部组件的时候,潜规则是首字母进行大写,然后使用驼峰命名法。

const YouYuXi = {
    template: `<h2>尤雨溪</h2>`
}

这里给出本节的全部代码,帮助你更好的学习。

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>Document</title>
    <script src="https://cdn.bootcdn.net/ajax/libs/vue/3.0.2/vue.global.js"></script>
</head>

<body>
    <div id="app"></div>
</body>
<script>
    const Counter = {
        data() {
            return {
                count: 0
            }
        },
        template: `<div>{{count}}<button @click="count++">增加1</button></div>`
    }
    const YouYuXi = {
        template: `<h2>尤雨溪</h2>`
    }
    const app = Vue.createApp({
        components:{
            mybj: Counter,
            'you-yu-xi': YouYuXi
        },
        template: `
        <h2>mybj123.com</h2>
        <you-yu-xi />
        <mybj />
        `
    })
    const vm = app.mount("#app")
</script>
</html>

「点点赞赏,手留余香」

0

给作者打赏,鼓励TA抓紧创作!

微信微信 支付宝支付宝

还没有人赞赏,快来当第一个赞赏的人吧!

声明:本站所有资源及文章均来源于网络及用户分享或为本站原创,仅限用于学习和研究,任何个人或组织,在未征得本站同意时,禁止复制、盗用、采集、发布本站内容到任何网站、书籍等各类媒体平台。如若本站内容侵犯了原著者的合法权益,可联系我们进行处理。
码云笔记 » 25. [组件]Vue3中的局部组件

发表评论

IT互联网行业相关广告投放 更专业 更精准

立即查看 联系我们