Vue基础技能【四、组件介绍、组件注册、配置选项、动态组件、组件缓存、组件关系】

1、组件的介绍

1.1、什么是组件

// 组件含义： 名词      
// 近义词：  零件
// 拥有独立功能，能够帮助我们实现某些页面功能的 “零件”

 // 网页
// 头部是组件、导航是组件、轮播是组件、页脚是组件、  一切皆组件
// 小到一个按钮标签   大到  一个页面是组件

1.2、组件的特点

组件特点： 独立功能    html   css  js

1.3、为什么要用组件

 // 想要复用    
            // 为什么复用？？？
                // 提高开发速度
                    // 提高开发速度？？？
                        // 省钱，挣更多的钱

1.4、原生实现一个组件

HTML代码

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>原生注册一个组件</title>
    <script src="myalert.js"></script>
</head>
<body>
</body>
<script>

    let myalert = new MyAlert();  // 实例化一个弹框
    myalert.show();

    setTimeout(()=>{
        myalert.hide();
    },3000);

</script>
</html>

myalert.js 代码

 /**
 * 弹框组件构造函数
 */
function MyAlert(){
    this.init();
}
MyAlert.prototype.init = function(){
    this.htmlstr = `
        <div class="myalert">
            <div class="title">
            标题内容
            </div>
            <div class="content">
                内容
            </div>
            <button>确定</button>
        </div>
    `
}
// 展示
MyAlert.prototype.show = function(){
    // 创建一个节点
    var  div = document.createElement("div");
    div.id = "alert-box";
    div.innerHTML = this.htmlstr; 
    document.body.appendChild(div);
    this.initCss();
}
// 隐藏
MyAlert.prototype.hide = function(){
    let div = document.querySelector("#alert-box");
    if(div){
        div.parentNode.removeChild(div);
    }
}
// 创建CSS
MyAlert.prototype.initCss = function(){
    let style  = document.createElement("style");
    style.type = "text/css";
    style.innerHTML = `
        .myalert{
            width:230px;
            position: fixed;
            left:50%;
            top:50%;
            background-color: rgba(0,0,0,0.4);
            color: #fff;
            border-radius: 5px;
            overflow:hidden;
            transform: translate(-50%,-50%);
        }
        .myalert .title{
            background-color:blue;
            text-indent: 20px;
            line-height: 30px;
        }
        .myalert .content{
            padding: 10px 20px;
            text-align: center;
        }
        .myalert button{
            margin: 10px ;
            float: right;
            background-color: red;
            border-color: red;
            padding: 2px 10px;
            color: #fff;
            cursor: pointer;
            outline: none;
        }
    `
    document.head.appendChild(style);
}

2、Vue注册组件

核心：组件名、组件的配置对象

2.1、局部注册

new Vue({
        el:"#app",
        data:{},
        computed:{},
        methods:{},
        watch:{},
        components:{  // 该实例用到的组件
            // 组件名:组件配置信息对象
            myalert:{
                template:`
                    <div class="myalert">
                        <div class="title">
                        标题内容
                        </div>
                        <div class="content">
                            内容
                        </div>
                        <button>确定</button>
                    </div>
                `
            }

        }
    })

 // 局部注册：
        // Vue实例里面  添加一个components

            /*
                components:{
                    组件名:{
                        template:"组件的模板"
                    }
                }

            */

注意：只能在该实例中使用该组件，其他Vue实例不可以使用。

2.2、全局注册

Vue.component('myalert',{
        template:`
                <div class="myalert">
                    <div class="title">
                    标题内容
                    </div>
                    <div class="content">
                        内容
                    </div>
                    <button>确定</button>
                </div>
            `
    })

 // Vue.component('组件名',{组件配置对象})   // 全局注册  一定要放在实例化Vue对象之前

注意：全局注册组件一定要在Vue实例化对象之前。

2.3、template剥离

在HTML中利用template标签定义模板，指定id值

<body>
	<template id="htmlstr">
        <div class="myalert">
            <div class="title">
            标题内容
            </div>
            <div class="content">
                内容
            </div>
            <button>确定</button>
        </div>
    </template>
<body/>

在配置选项中通过id进行绑定

 Vue.component('myalert',{
        template:"#htmlstr"
    })

3、组件的配置选项

基本和Vue实例配置项一致

Vue.component('组件名',{   // 组件名，注意驼峰命名法； 组件名不能是html标签名
		template:"",   // 模板，可以通过id剥离。 注意只可以有一个容器标签
    data(){// data是一个函数， 因为组件需要数据独立，不可以共享
      return{
       	// 组件的数据 
      }
    },
    computed:{},  // 计算属性
    watch:{},  // 监听器
    methods:{}   // 方法
    // 八个生命周期函数
})

注意： data是函数

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <script src="https://cdn.jsdelivr.net/npm/vue/dist/vue.js"></script>
    <title></title>
</head>
<body>
    <div id="app">
        <!-- <myNav></myNav> -->
        <my-nav></my-nav>
        <mybox></mybox>
    </div>
</body>
<script>
    Vue.component('myNav',{
        template:`
            <div>
                <h1>你好===={{nums}}</h1>
                <button @click="add">添加</button>
                <h3>333333333</h3>
            </div>
        `,
        // data:function(){
        //     return{
        //         nums:100
        //     }
        // }
        data(){
            return{
                nums:100
            }
        },
        computed:{},
        watch:{},
        methods:{
            add(){
                this.nums +=100;
            }
        },
        created(){
            console.log("组件被创建了");
            console.log(this);
        }
    })

    Vue.component("mybox",{
        template:"<h3>{{msg}}</h3>",
        data(){
            return{
                msg:"我是mybox"
            }
        }
    })

    new Vue({
        el:"#app",
        data:{
            str:"我是Vue实例啊啊啊啊啊!"
        },
        created(){
            console.log("vue实例被创建了");
            console.log(this);
        }
    })


    // 组件命名的时候，使用了驼峰命名法，那么书写组件的时候就要用-

    // 配置选项：
        // 和Vue大致一样

        // template  类似Vue的el      template  只可以有一个根标签元素
        // 组件的data要求是一个函数   组件应该实现数据独立化  组价的数据不应该被共享
        // 其他选项和Vue实例一致
        

    // Vue实例里面的 $children 是当前组件用到的子组件
    // 组件里面的    $parent   是当前组件的父组件    


    // let obj = {
    //         nums:100
    // };
    // function Banner(){
    //     this.data = obj;
    // }
    function Banner(){
        this.data =  (function(){
            return {
                nums:100
            }
        })()
    }
    Banner.prototype.add = function(){
        this.data.nums+=100;
    }

    let b1 = new Banner();
    let b2 = new Banner();
    b1.add();
    console.log(b1.data.nums); // 200
    console.log(b2.data.nums);  // 100
    
</script>
</html>

4、动态组件

我们想在某个区域展示不同的组件内容。比如tab切换的内容区域
组件名：

动态组件实现tab切换

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <script src="https://cdn.jsdelivr.net/npm/vue/dist/vue.js"></script>
    <title></title>
    <style>
        li{
            display: inline-block;
        }
        li.active{
            color: red;
        }
    </style>
</head>
<body>
    <div id="app">
        <ul>
            <li @click="cur='yinyue'" :class="cur=='yinyue' ? 'active':''">音乐</li>
            <li @click="cur='xinwen'"  :class="cur=='xinwen' ? 'active':''">新闻</li>
            <li @click="cur='junshi'"  :class="cur=='junshi' ? 'active':''">军事</li>
        </ul>
        <div class="box">
            <!-- <yinyue></yinyue>
            <xinwen></xinwen>
            <junshi></junshi> -->
            <component :is="cur"></component>
        </div>
    </div>
</body>
<script>
    Vue.component('yinyue',{
        template:`
            <div class='content'>音乐内容</div>
        `
    })
    Vue.component('xinwen',{
        template:`
            <div class='content'>新闻内容</div>
        `
    })
    Vue.component('junshi',{
        template:`
            <div class='content'>军事内容</div>
        `
    })


    new Vue({
        el:"#app",
        data:{
            cur:'xinwen'
        },
        methods:{
            tab(idx){
                this.cur =idx;
            }
        }
    })


    // 动态组件   动态的组件     <component is='组件名'></component>

</script>
</html>

5、组件缓存

为什么需要组件缓存：当我们访问过后就希望数据被保存下来，下次再次进入同样可以展示。无需重新重建该组件。

缓存组件：缓存的组件

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <script src="https://cdn.jsdelivr.net/npm/vue/dist/vue.js"></script>
    <title></title>
    <style>
        li{
            display: inline-block;
        }
        li.active{
            color: red;
        }
    </style>
</head>
<body>
    <div id="app">
        <ul>
            <li @click="cur='yinyue'" :class="cur=='yinyue' ? 'active':''">音乐</li>
            <li @click="cur='xinwen'"  :class="cur=='xinwen' ? 'active':''">新闻</li>
            <li @click="cur='junshi'"  :class="cur=='junshi' ? 'active':''">军事</li>
        </ul>
        <div class="box">
            <keep-alive>
                <component :is="cur"></component>
            </keep-alive>
        </div>
    </div>
</body>
<script>
    Vue.component('yinyue',{
        template:`
            <div class='content'>音乐内容</div>
        `,
        created(){
            console.log('音乐组件被创建了');
        }
    })
    Vue.component('xinwen',{
        template:`
            <div class='content'>新闻内容</div>
        `,
        created(){
            console.log('新闻组件被创建了');
        }
    })
    Vue.component('junshi',{
        template:`
            <div class='content'>军事内容</div>
        `,
        created(){
            console.log('军事组件被创建了');
        }
    })


    new Vue({
        el:"#app",
        data:{
            cur:'xinwen'
        },
        methods:{
            tab(idx){
                this.cur =idx;
            }
        }
    })


    // 组件缓存 只需要使用一下  缓存组件     <keep-alive></keep-alive>

</script>
</html>

6、组件关系

this.$parent：当前组件的父组件
this.$root : 当前组件的根组件一般是Vue实例
this.$children：当前组件的所有子组件

7、$refs获取标签或组件

Vue中如何获取原生的DOM标签

document.querySelector('选择器')
// 需要放在  生命周期的挂载完成之后， 也就是在mounted里面

// 该方法也比较麻烦。 结合了原生的内容

this.$refs属性是需要查找的节点内容或组件内容

this.$refs的用法

<标签 ref='变量名'></标签>
<组件名 ref='变量名'></组件名>


// 组件内部
this.$refs.变量名   获取该标签或组件
// 注意： 也是需要在挂载完成之后，也就是在mounted里面才有效

作用：将来会用来获取原生DOM初始化插件、或者用来获取某个子组件的信息（数据）

醉酒笑红尘s

发布了10 篇原创文章 · 获赞 0 · 访问量 130

私信关注

Vue基础技能【四、组件介绍、组件注册、配置选项、动态组件、组件缓存、组件关系】

1、组件的介绍

1.1、什么是组件

1.2、组件的特点

1.3、为什么要用组件

1.4、原生实现一个组件

2、Vue注册组件

2.1、局部注册

2.2、全局注册

2.3、template剥离

3、组件的配置选项

4、动态组件

5、组件缓存

6、组件关系

7、$refs获取标签或组件

猜你喜欢