Vue-10-组件

阿国GG在学习

已于 2022-03-30 13:53:56 修改

阅读量955

点赞数

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

于 2022-03-30 00:53:02 首次发布

本文链接：https://blog.csdn.net/weixin_46147113/article/details/123835584

版权

本文详细介绍了Vue.js组件的各个方面，包括组件的注册（全局与局部）、组件选项（模板、数据、props、方法、生命周期钩子）、组件props的静态与动态使用、单向数据流原理、组件间的通信（自定义事件、事件总线）、内容分发slot插槽的用法（默认、具名、作用域插槽）以及动态组件的实现和keep-alive的使用。文章深入浅出地探讨了Vue.js组件的各个关键概念，旨在提升开发效率和项目可维护性。

摘要由CSDN通过智能技术生成

一、组件感受

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>Title</title>
<!--  使用CDN的方式引入Vue.js  -->
    <script src="https://cdn.jsdelivr.net/npm/vue@2.6.14/dist/vue.js"></script>
</head>
<body>
<div id="app">
    <button-counter></button-counter>
    <button-counter></button-counter>
</div>

<script>
    //  定义一个名为 button-counter的全局组件
    Vue.component('button-counter',{
        data:function (){
            return {
                count: 0
            }
        },
        template:'<button v-on:click="count++">点我{
  {count}}次了</button>'
    })



    var vm=new Vue({
        el:'#app',
    })
</script>
</body>
</html>

运行结果

使用的组件的好处：

1、提高开发效率

2、方便重复使用

3、简化调式步骤

4、提升整个项目的可维护性

5、便于协同开发

二、组件的注册

1、组件注册类型：全局注册和局部注册

2、全局注册

第一种

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>Title</title>
<!--  使用CDN的方式引入Vue.js  -->
    <script src="https://cdn.jsdelivr.net/npm/vue@2.6.14/dist/vue.js"></script>
</head>
<body>
<div id="app">
    <my-component></my-component>
</div>

<script>
    /*
    全局注册：必须确保在实例初始化之前注册，这样才能在任意实例种被使用。全居住从有三种方式
    命名推荐：使用小写字母加 “-” 分隔符的形式命名
    注意：
        1、template的DOM结构必须被一个而且是唯一一个根元素所包含，直接引用而不被“<div></div>”包裹是无法被渲染的
        2、
          Vue.component('组件名称',{
          //  选项
        })

    */
    Vue.component('my-component',{
        template:'<h1>全局注册</h1>'
    })


    var vm=new Vue({
        el:'#app',
    })
</script>
</body>
</html>

运行结果

第二种

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>Title</title>
<!--  使用CDN的方式引入Vue.js  -->
    <script src="https://cdn.jsdelivr.net/npm/vue@2.6.14/dist/vue.js"></script>
</head>
<body>
<div id="app">
    <my-component></my-component>
</div>

<script>
    var list=Vue.extend({
        template:'<h1>组件的第二种注册方式</h1>'
    });
    Vue.component('my-component',list);

    //  根实例
    var vm=new Vue({
        el:'#app',
    })
</script>
</body>
</html>

运行结果

第三种

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>Title</title>
<!--  使用CDN的方式引入Vue.js  -->
    <script src="https://cdn.jsdelivr.net/npm/vue@2.6.14/dist/vue.js"></script>
</head>
<body>
<div id="app">
    <my-component></my-component>
</div>
<template id="tmpl">
    <div><a href="#">登录</a>|<a href="">注册</a></div>
</template>
<script>
    Vue.component('my-component',{
        template: '#tmpl'
    });

    var vm=new Vue({
        el:'#app',
    })
</script>
</body>
</html>

运行结果

3、组件的局部注册

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>Title</title>
<!--  使用CDN的方式引入Vue.js  -->
    <script src="https://cdn.jsdelivr.net/npm/vue@2.6.14/dist/vue.js"></script>
</head>
<body>
<div id="app">
    <account></account>
    <login></login>
</div>

<script>
    var vm=new Vue({
        el:'#app',
        data:{},
        methods:{},
        components:{    //  定义子组件
            account:{
                template:'<div><h1>定义的是子组件*****</h1></div>'
            },
            //  定义子组件的子组件
            login:{
                    template:'<h1>这是子组件</h1>'
            }
        }
    })
</script>
</body>
</html>

运行结果