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>

 

 
 
 
 
 
 
标签：

相关文章