当前位置：主页 > 查看内容

Vue---组件详解

发布时间：2021-08-02 00:00| 有 位朋友查看

简介：文章目录 一.组件的作用 二.使用组件 三.全局注册和局部组注册 四.父组件和子组件 五.注册组件的语法糖写法 一.组件的作用 我们在开发过程中会复用许多的代码我们不会写许多重复的代码这样也会使我们的代码变得很臃肿我们在c语言的学习过程中使用到了函数来……

文章目录

一.组件的作用

我们在开发过程中，会复用许多的代码，我们不会写许多重复的代码，这样也会使我们的代码变得很臃肿，我们在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 tempFather = Vue.extend({
        template:
            `<h1>
                    Good Morning
            </h1>`
    })
    const tempSon = Vue.extend({
        template:
            `<div>
                <h1>Good Night</h1>
                <temp></temp>
            </div>
            `,
        components:{
            temp:tempFather
        }
    })
    const app = new Vue({
        el:"#app",
        data:{

        },
        components:{
          myButton:tempSon
        }
    })
</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>
；原文链接：https://blog.csdn.net/weixin_45965358/article/details/115796059
本站部分内容转载于网络，版权归原作者所有，转载之目的在于传播更多优秀技术内容，如有侵权请联系QQ/微信：153890879删除，谢谢！
上一篇：Vue2.0/3.0 双向数据绑定的实现原理 下一篇：没有了

推荐图文

  • 周排行
  • 月排行
  • 总排行

随机推荐