VUE组件化

一只小可乐吖

已于 2023-04-20 20:50:24 修改

阅读量287

点赞数 3

分类专栏： vue的一些整理文章标签： vue.js javascript 前端

于 2023-04-20 20:49:21 首次发布

本文链接：https://blog.csdn.net/weixin_40381947/article/details/130274779

版权

vue的一些整理专栏收录该内容

12 篇文章 3 订阅

订阅专栏

《前言》：有时候有一组html结构的代码，并且这个上面可能还绑定了事件。然后这段代码可能有多个地方都被使用到了，如果都是拷贝来拷贝去，很多代码都是重复的，包括事件部分的代码都是重复的。那么这时候我们就可以把这些代码封装成一个组件，以后在使用的时候就跟使用普通的html元素一样，拿过来用就可以了。

一：VUE组件化

VUE框架的核心：数据驱动和组件化。

组件的概念：

组件是自定义标签，vueJS提供的组件可以让程序员自定义标签，对页面进行模块化。每个

标签里包含HTML，CSS，JS。

vue的组件就是一个vue对象。（vue的两大核心：数据驱动，组件化）。vue对象的配置项

在vue组件里也可以使用。

组件的配置项如下：

没有el属性。 template：html模板代码，只能有一个根标签

data：必须是个函数

methods：

………………………………

一个完整的标签格式是： <标签名属性名=“属性值" 事件=”函数“>内容</标签名>

组件和函数封装的区别：

组件封装的是完整的页面功能（包括：HTML、CSS、JS），而函数只封装JS（逻辑）。

组件完成的是页面的模块化；js完成的是逻辑的模块化。

二：VUE组件的基本使用

1.定义组件：

let 组件变量名= Vue.extend({
        template:'<div class="header">{{msg}}，我是header组件</div>'
        data:function(){
			return {
				msg:”hi”
			}
		},
  });
//=======================简写========================
let 组件变量名={
    template:'<div class="header">{{msg}}，我是header组件</div>'
    data:function(){
        return {
            msg:”hi”
        }
    }
};

2.注册组件：

1）、全局注册

Vue.component('标签名',组件变量名);
全局注册的组件，在任何vue对象里都可以使用

2）、局部注册

//在vue对象的components选项里进行注册
new Vue({
     el:
     components:{
    	 标签名：组件变量名
     }     
});
局部注册的组件，只能在当前vue对象（组件）里使用。

3.使用组件：组件就是自定义标签，所以，使用组件，就跟使用标签是同样的。

<标签名></标签名>

写个例子看看吧：

<body >
    <div id="box">
        <!--使用组件（组件就是自定义标签，所以，就是使用标签）-->
       <chat></chat>
    </div>
</body>
</html>
<script src="./js/vue.js"></script>
<script>
// 定义组件
let chatObj = {
    template:`
        <div>
            <div style="width:200px;height:300px;border:1px solid black" v-html="msg"></div><br/>
            <input type="text" v-model="str" />
            <input type="button" value="发送" @click="send" />
        </div>
    `,
    data:function(){
        return{
            str:"",
            msg:""
        }
    },
    methods:{
        send(){
            this.msg += this.str+"<br/>"
            this.str ="";
        }
    }
};

// 2、全局注册
Vue.component("chat",chatObj);
     
let vm = new Vue({
        el: "#box",
        data: {
        },
    	//局部注册：
        components:{
            "chat":chatObj
        }
    });

</script>

4.组件嵌套：把一个组件的标签写在另外一个组件的template里，就是组件嵌套。

  //子组件 
  let mycomson = {
        template:"<div>我是son里的div：{{msg}}</div>",    
        data:function(){
            return {
                msg:"hi：son"
            }
        }
    };
   //父组件
    let myComParent = {
        template:`<div>
                        <p>我是p：{{msg}}</p>
                        <my-com-son></my-com-son>                    
                    </div>`,
        data:function(){
            return {
                msg:"hi"
            }
        },
        components:{
            // 局部注册了另外一个组件
            "my-com-son":myComSon
        }    
    };

5.组件编写方式与 Vue 实例(对象)的区别：

1、组件的标签名不可和html官方的标签名同名，标签名如果小驼峰，那么使用时，用短横线（羊肉串的写法），或者组件名首字母大写（这个规则是在未来的单文件组件，模块化的写法里使用）。

2、组件没有el选项，只有根实例存在el，组件里使用template定义模板

3、组件模板（html代码）只能有一个根标签

4、data必须是个函数（面试题），vue组件的data为什么是个函数。

一个组件的 data 选项必须是一个函数，且要有返回object（就是vue对象的data），只有这样，每个实例（vue组件对象）就可以维护一份被返回对象的独立的拷贝，否则，组件复用时，数据相互影响。即：组件的作用域（应该）是独立的。

简单回答：如果不是函数，那么，复用的组件的data共享同一块内存空间。

一只小可乐吖

关注

3
点赞
踩
0

收藏

觉得还不错? 一键收藏
打赏
0
评论
VUE组件化

组件是自定义标签，vueJS提供的组件可以让程序员自定义标签，对页面进行模块化。每个标签里包含HTML，CSS，JS。 vue的组件就是一个vue对象。（vue的两大核心：数据驱动，组件化）。vue对象的配置项在vue组件里也可以使用。
复制链接

扫一扫