vue----全局组件,局部组件

时间:2023-01-09 21:11:10
1.组件:
页面的每一个模块都是一个组件
分为:
  局部组件 全局组件
2.全局组件
Vue.component(参数1,参数2)
 
参数1:组件名称---做标签进行使用的(组件名称大写,不允许与html标签名字相同)
参数2:组件的配置项
--->对象(可抽出单独写) 这个对象会有一些属性,这些属性只要vue里面有的属性那么这里面都会有
       (template,data,methods.computed,watch,生命周期函数等),简单的来说这个组件其实就是小型vue实例     template:里面写的是html结构(其实是虚拟DOM)     data:是一个函数 必须返回一个对象
3.局部组件
局部组件在vue的内部进行实现
new Vue({
    el:"#app",
   components:{ key:val }
 
    key:组件名称 val:组件的配置项
})
4.为什么组件内部data是一个函数?
组件可以复用,
如果是对象的情况下,在组件复用时可能会导致data中的数据出现覆盖或者调用出错。
因此是一个函数,这样的情况下,每次使用组件,都会调用函数,每次函数执行完毕后会返回一个新的对象 而不是公用的一个对象
5.组件和vue实例的区别
1、组件内部多了一个属性叫做template
 
2、组件内部的data不在是一个对象了 而是一个函数 需要返回一个对象
全局组件案例:
<body>
    <div id="app">
        <!-- 使用中间件 -->
        <banner-con></banner-con>
    </div>
 
    <div id="app2">
        <banner-con></banner-con>
    </div>
</body>
</html>
<script src="vue.js"></script>
<script>
//配置项
    const banner = {
    //模板
        template:`<div>
                <img v-for="(item,index) in imgs" :src="item" />
            </div>`,
//注意data是一个函数,必须return一个对象
//数据
        data(){
            return {
                imgs:[
                   "https://pic.maizuo.com/usr/movie/9f80ee6f3351c49dcf9de57dfbc8cdfe.jpg",
                   "https://pic.maizuo.com/usr/movie/5a406a685eb7906b793181328d571ad7.jpg",
                   "https://pic.maizuo.com/usr/movie/9a843566ffc11c80e1747e7af8a5e48a.jpg"
               ]
            }
        },
        methods:{
 
        },
        created(){
            console.log(this);
        }
    }
  
Vue.component("banner-con",banner) var vm = new Vue({
        el:"#app"
    })
 
    var vm2 = new Vue({
        el:"#app2"
    })
</script>
  局部组件案例
<body>
    <div id="app">
        <!-- 使用中间件 -->
        <banner-con></banner-con>
    </div>
</body>
</html>
<script src="vue.js"></script>
<script>
//配置项
    const banner = {
        //模板
        template:`<div>
                <img v-for="(item,index) in imgs" :src="item" />
            </div>`,
        //模板字符串
        data(){
            return {
                imgs:[
                   "https://pic.maizuo.com/usr/movie/9f80ee6f3351c49dcf9de57dfbc8cdfe.jpg",
                   "https://pic.maizuo.com/usr/movie/5a406a685eb7906b793181328d571ad7.jpg",
                   "https://pic.maizuo.com/usr/movie/9a843566ffc11c80e1747e7af8a5e48a.jpg"
               ]
            }
        },
        methods:{
 
        }
       
    }
  
    var vm = new Vue({
        el:"#app",
        //局部组件,数据,方法等都是在配置项中写
        components:{
            //key:组件的名称,value组件的配置项,可单独写
            "banner-con":banner }
    })
</script>