Vue3学习笔记（6.0）

最新推荐文章于 2024-05-02 21:17:26 发布

mez_Blog

最新推荐文章于 2024-05-02 21:17:26 发布

阅读量509

点赞数 1

分类专栏： Vue3 HTML5 前端文章标签：学习 javascript vue.js 前端开发语言

本文链接：https://blog.csdn.net/mez_Blog/article/details/129836389

版权

前端同时被 3 个专栏收录

46 篇文章 0 订阅

订阅专栏

HTML5

32 篇文章 0 订阅

订阅专栏

20 篇文章 0 订阅

订阅专栏

Vue3组件

组件（Component）是Vue.js最强大的功能之一。

组件可以扩展HTML元素，封装可重用的代码。

组件系统让我们可以用独立可复用的小组件来构建大型应用，几乎任意类型的应用的界面都可以抽象为一个组件树。

每个Vue应用都是通过用createApp函数创建的，传递给createApp的选项用于配置根组件。当我们挂载应用时，该组件被用作渲染的起点。一个应用需要被挂载到一个DOM元素中。

以下实例我们将Vue应用挂载到<div id="app"></div>，应该传入#app：

const RootComponent={/*  选项*/}
const app=Vue.createApp(RootComponent)
const vm=app.mount('#app')

注册一个全局组件语法格式如下：

const app =Vue.createApp({...})
app.component('my-component-name',{

/*      */
})

my-component-name为组件名，/* */部分为配置选项。注册后，我们可以使用以下方式来调用组件：

<my-component-name></my-component-name>

<!--
 * @Author: RealRoad1083425287@qq.com
 * @Date: 2023-03-29 15:51:28
 * @LastEditors: Mei
 * @LastEditTime: 2023-03-29 15:55:36
 * @FilePath: \vscode\diymodel.html
 * @Description: 
 * 
 * Copyright (c) 2023 by ${git_name_email}, All Rights Reserved. 
-->
<!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_doc/vue.global3.js"></script>
</head>
<body>
    <div id="app">
        <runoob1></runoob1>
    </div>

    <script>
        const app=Vue.createApp({})

        app.component('runoob1',{
            template:'鸡你太美！'
        })

        app.mount('#app')
    </script>
</body>
</html>

<!--
 * @Author: RealRoad1083425287@qq.com
 * @Date: 2023-03-29 15:51:28
 * @LastEditors: Mei
 * @LastEditTime: 2023-03-29 16:00:56
 * @FilePath: \vscode\diymodel.html
 * @Description: 
 * 
 * Copyright (c) 2023 by ${git_name_email}, All Rights Reserved. 
-->
<!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_doc/vue.global3.js"></script>
</head>
<body>
    <div id="app">
        <random_name></random_name>
    </div>

    <script>
        const app=Vue.createApp({})

        app.component('random_name',{
            data(){
                return{
                    count:0
                }
                
            },
            // template:'鸡你太美！'
            template:`
            <button @click="count++">点了{{count}}次！！！！</button>`
        }
        
    )

        app.mount('#app')
    </script>
</body>
</html>

组件的复用

我们可以将组件进行任意次数的复用

同样的代码，搞起

<!--
 * @Author: RealRoad1083425287@qq.com
 * @Date: 2023-03-29 15:51:28
 * @LastEditors: Mei
 * @LastEditTime: 2023-03-29 16:03:22
 * @FilePath: \vscode\diymodel.html
 * @Description: 
 * 
 * Copyright (c) 2023 by ${git_name_email}, All Rights Reserved. 
-->
<!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_doc/vue.global3.js"></script>
</head>
<body>
    <div id="app">
        <random_name></random_name>
        <random_name></random_name>
        <random_name></random_name>
        <random_name></random_name>
        <random_name></random_name>
    </div>

    <script>
        const app=Vue.createApp({})

        app.component('random_name',{
            data(){
                return{
                    count:0
                }
                
            },
            // template:'鸡你太美！'
            template:`
            <button @click="count++">点了{{count}}次！！！！</button>`
        }
        
    )

        app.mount('#app')
    </script>
</body>
</html>

全局组件

上面的示例中我们的组件都是通过component全局祖册的。

全局注册的组件可以在随后创建的app示例模板中使用，也包括实例组件树中的所有子组件的模板中。上面的基尼太美就是

下面看局部组件

全局祖册往往是不够理想的。比如，如果你使用一个像webpack这样的构建系统，全局注册所有的组件意味着即使你已经不再使用一个组件了，它仍然会被包含在你最终的构建结果中。这就造成了用户下载的JavaScript的无谓的增加。

在这些情况下，我们可以通过一个普通的JavaScript对象来定义组件：

const ComponentA={





}

在components选项中定义我们想要使用的组件：

const app=Vue.createApp({
components:{
'component-a':ComponentA,
'component-b':ComponentB,}})

对于components对象的每个属性来说，其属性名就是自定义元素的名字（component-a、component-b），其属性值就是这个组件的选项对象（ComponentA、ComponentB）。

我们也可以在实例选项中注册局部组件，这样组件只能在这个实例中使用：

<!--
 * @Author: RealRoad1083425287@qq.com
 * @Date: 2023-03-29 15:51:28
 * @LastEditors: Mei
 * @LastEditTime: 2023-03-29 16:19:57
 * @FilePath: \vscode\diymodel.html
 * @Description: 
 * 
 * Copyright (c) 2023 by ${git_name_email}, All Rights Reserved. 
-->
<!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_doc/vue.global3.js"></script>
</head>
<body>
    <div id="app">
        <!-- <random_name></random_name>
        <random_name></random_name>
        <random_name></random_name>
        <random_name></random_name>
        <random_name></random_name> -->

        <jubu_name></jubu_name>
    </div>

    <script>

        var runoobA={
            template:'唱跳rap篮球'
        }

        const app=Vue.createApp({
            components:{
                'jubu_name':runoobA
            }
        })

    //     app.component('random_name',{
    //         data(){
    //             return{
    //                 count:0
    //             }
                
    //         },
    //         // template:'鸡你太美！'
    //         template:`
    //         <button @click="count++">点了{{count}}次！！！！</button>`
    //     }
        
    // )

        app.mount('#app')
    </script>
</body>
</html>

Prop是子组件用来接受父组件传递过来的一个自定义属性

父组件的数据需要通过props把数据传给子组件，子组件需要显式地用props选项声明“prop”：

<!--
 * @Author: RealRoad1083425287@qq.com
 * @Date: 2023-03-29 15:51:28
 * @LastEditors: Mei
 * @LastEditTime: 2023-03-29 16:29:25
 * @FilePath: \vscode\diymodel.html
 * @Description: 
 * 
 * Copyright (c) 2023 by ${git_name_email}, All Rights Reserved. 
-->
<!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_doc/vue.global3.js"></script>
</head>
<body>
    <div id="app">
        <random_name title="baidu"></random_name>
        <random_name title="souhu"></random_name>
        <random_name title="duniang"></random_name>
        <random_name title="suibian"></random_name>
        <random_name title="test"></random_name>

        <!-- <jubu_name></jubu_name> -->
    </div>

    <script>

        var runoobA={
            template:'唱跳rap篮球'
        }

        // const app=Vue.createApp({
        //     components:{
        //         'jubu_name':runoobA
        //     }
        // })
        const app=Vue.createApp({})


        app.component('random_name',{
            props:['title'],
            // data(){
            //     return{
            //         count:0
            //     }
                
            // },
            // template:'鸡你太美！'
            template:`
            <div>{{title}}</div>`
        }
        
    )

        app.mount('#app')
    </script>
</body>
</html>

一个组件默认可以拥有任意数量的prop，任何值都可以传递给任何prop。

动态Prop

类似于用v-bind绑定HTML特性到一个表达式，也可以用v-bind动态绑定props的值到父组件的数据中。每当父组件的数据变化时，该变化也会传到给子组件：

<!--
 * @Author: RealRoad1083425287@qq.com
 * @Date: 2023-03-29 15:51:28
 * @LastEditors: Mei
 * @LastEditTime: 2023-03-29 16:38:56
 * @FilePath: \vscode\diymodel.html
 * @Description: 
 * 
 * Copyright (c) 2023 by ${git_name_email}, All Rights Reserved. 
-->
<!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_doc/vue.global3.js"></script>
</head>
<body>
    <div id="app">
        <!-- <random_name title="baidu"></random_name>
        <random_name title="souhu"></random_name>
        <random_name title="duniang"></random_name>
        <random_name title="suibian"></random_name>
        <random_name title="test"></random_name> -->
        <site-info v-for="site in sites" :id="site.id" :title="site.title"></site-info>

        <!-- <jubu_name></jubu_name> -->
    </div>

    <script>
        const Site={
            data(){
                return {
                    sites:[
                        {id:1,title:"baidu1"},
                        {id:2,title:"baidu2"},
                        {id:3,title:"baidu3"}
                    ]
                }
            }
        }

        var runoobA={
            template:'唱跳rap篮球'
        }

        // const app=Vue.createApp({
        //     components:{
        //         'jubu_name':runoobA
        //     }
        // })
        const app=Vue.createApp(Site)


        app.component('site-info',{
            props:['id','title'],
            // data(){
            //     return{
            //         count:0
            //     }
                
            // },
            // template:'鸡你太美！'
            template:`
            <div>{{id}}-{{title}}</div>`
        }
        
    )

        app.mount('#app')
    </script>
</body>
</html>

Prop验证

组件可以为props指定验证要求。

为了定值prop的验证方式，我们可以为props中的值提供一个带有验证需求的对象，而不是一个字符串数组。例如：

Vue.component('my-component', {
  props: {
    // 基础的类型检查 (`null` 和 `undefined` 会通过任何类型验证)
    propA: Number,
    // 多个可能的类型
    propB: [String, Number],
    // 必填的字符串
    propC: {
      type: String,
      required: true
    },
    // 带有默认值的数字
    propD: {
      type: Number,
      default: 100
    },
    // 带有默认值的对象
    propE: {
      type: Object,
      // 对象或数组默认值必须从一个工厂函数获取
      default: function () {
        return { message: 'hello' }
      }
    },
    // 自定义验证函数
    propF: {
      validator: function (value) {
        // 这个值必须匹配下列字符串中的一个
        return ['success', 'warning', 'danger'].indexOf(value) !== -1
      }
    }
  }
})

当prop验证失败时，Vue将会产生一个控制台警告。

type可以是以下原生构造器：

string number Boolean Array Object Date Function Symbol

type也可以是一个自定义构造器，使用instanceof检测。

mez_Blog

关注

1
点赞
踩
0

收藏

觉得还不错? 一键收藏
打赏
0
评论
Vue3学习笔记（6.0）

比如，如果你使用一个像webpack这样的构建系统，全局注册所有的组件意味着即使你已经不再使用一个组件了，它仍然会被包含在你最终的构建结果中。全局注册的组件可以在随后创建的app示例模板中使用，也包括实例组件树中的所有子组件的模板中。为了定值prop的验证方式，我们可以为props中的值提供一个带有验证需求的对象，而不是一个字符串数组。组件系统让我们可以用独立可复用的小组件来构建大型应用，几乎任意类型的应用的界面都可以抽象为一个组件树。上面的示例中我们的组件都是通过component全局祖册的。
复制链接

扫一扫