Vue---组件详解

最新推荐文章于 2024-07-21 00:03:27 发布

Listener-1379

最新推荐文章于 2024-07-21 00:03:27 发布

阅读量3.2k

点赞数 9

分类专栏： Vue 文章标签： vue.js vue

本文链接：https://blog.csdn.net/weixin_45965358/article/details/115796059

版权

Vue 专栏收录该内容

22 篇文章 0 订阅

订阅专栏

文章目录

一.组件的作用
二.使用组件
三.全局注册和局部组注册
四.父组件和子组件
五.注册组件的语法糖写法

一.组件的作用

我们在开发过程中，会复用许多的代码，我们不会写许多重复的代码，这样也会使我们的代码变得很臃肿，我们在c语言的学习过程中，使用到了函数来封装我们的函数来实现代码的复用，我们在vue中，可以使用组件来封装我们的代码。组件可以使我们很轻易地对我们的代码进行修改，任何我们所看到的页面都可以分解成组件。如下：

官方文档的例子，我们将一个页面分解为一颗树。
在这里插入图片描述

二.使用组件

在这里插入图片描述

创建组件构造器

我们通过Vue.extend()可以创建一个组件构造器，其中上面的（）里面的内容可以认为是一个对象，``在Tab之上，是一个特殊符号，与单引号类似，但是可以不受行的限制。

在这里插入图片描述

一个模板对象

注册组件

注册语法

在这里插入图片描述

其中，tagName为组件名，options为组件配置项。
在这里插入图片描述

例子中，'myButton’为组件名，temp为组件配置项。

使用组件

使用语法：

在这里插入图片描述

tagName为我们自定义的组件名。

示例代码：

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>Title</title>
    <script src = "../../js/vue.js"></script>
</head>
<body>
    <div id = "app">
        <!--使用组件-->
        <my-button></my-button>
        <my-button></my-button>
        <my-button></my-button>
    </div>
    <script type = "text/javascript">

        //创建组件构造器
        const temp = Vue.extend({
            template:
                `<h1>
                    Good Morning
                </h1>`
        })

        //注册组件
        Vue.component('myButton',temp)

        const app = new Vue({
            el:"#app",
            data:{

            }
        })
    </script>
</body>
</html>

三.全局注册和局部组注册

全局注册

我们通过Vue.component()注册的组件为全局组件，它可以在vue的任何实例当中被使用。语法：

在这里插入图片描述

局部注册

我们在vue实例中注册的组件为局部组件，它只能被本实例中被使用。例如：

在这里插入图片描述

注意，不是vue实例不能使用任何的vue组件。

示例代码：

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>Title</title>
    <script src = "../../js/vue.js"></script>
</head>
<body>
    <div id = "app">
        <my-button></my-button>
        <my-button></my-button>
        <my-button2></my-button2>
    </div>
    <div id = "app1">
        <my-button></my-button>
        <!--在这里不能用 <my-button2></my-button2>-->
    </div>
    <script type = "text/javascript">
        const temp = Vue.extend({
            template:`
                <h2>Welcome to Vue</h2>
            `
        })

        //全局组件
        Vue.component('myButton',temp);

        const app = new Vue({
            el:"#app",
            data:{

            },
            //局部组件
            components:{
                myButton2:temp
            }
        })

        const app1 = new Vue({
            el:"#app1",
        })
    </script>
</body>
</html>

四.父组件和子组件

如下面的例子，使用组件中的components属性，就可以在父组件中使用子组件。
在这里插入图片描述

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>Title</title>
    <script src = "../../js/vue.js"></script>
</head>
<body>
<div id = "app">
    <my-button></my-button>
</div>
<script type = "text/javascript">
    const tempSon = Vue.extend({
        template:
            `<h1>
                    Good Morning
            </h1>`
    })
    const tempFather = Vue.extend({
        template:
            `<div>
                <h1>Good Night</h1>
                <temp></temp>
            </div>
            `,
        components:{
            temp:tempSon
        }
    })
    const app = new Vue({
        el:"#app",
        data:{

        },
        components:{
          myButton:tempFather
        }
    })
</script>
</body>
</html>

五.注册组件的语法糖写法

我们以第一个实例为例子：

没使用语法糖前
在这里插入图片描述
使用语法糖后

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>Title</title>
    <script src = "../../js/vue.js"></script>
</head>
<body>
    <div id = "app">
        <!--使用组件-->
        <my-button></my-button>
        <my-button></my-button>
        <my-button></my-button>
    </div>
    <script type = "text/javascript">

        //创建组件构造器
        //注册组件
        Vue.component('myButton',{
            template:
                `<h1>
                    Good Morning
                </h1>`
        })

        const app = new Vue({
            el:"#app",
            data:{

            }
        })
    </script>
</body>
</html>

Listener-1379

关注

9
点赞
踩
30

收藏

觉得还不错? 一键收藏
7
评论
Vue---组件详解

文章目录一.组件的作用二.使用组件三.全局注册和局部组注册四.父组件和子组件五.注册组件的语法糖写法一.组件的作用我们在开发过程中，会复用许多的代码，我们不会写许多重复的代码，这样也会使我们的代码变得很臃肿，我们在c语言的学习过程中，使用到了函数来封装我们的函数来实现代码的复用，我们在vue中，可以使用组件来封装我们的代码。组件可以使我们很轻易地对我们的代码进行修改，任何我们所看到的页面都可以分解成组件。如下：官方文档的例子，我们将一个页面分解为一颗树。二.使用组件创建组件构造器我们通过
复制链接

扫一扫

专栏目录