Vue组件

已于 2023-05-21 13:32:21 修改
阅读量1.4k 收藏 10
点赞数 10
分类专栏： Vue 文章标签： vue.js javascript 前端
于 2023-03-22 20:05:26 首次发布
版权声明：本文为博主原创文章，遵循 CC 4.0 BY-SA 版权协议，转载请附上原文出处链接和本声明。
本文链接：https://blog.csdn.net/qq_39321234/article/details/129715608
版权

1.组件的基本使用

在这里插入图片描述

组件可以理解为一个模块，当这个模块需要重复使用时，定义为组件，在其他页面中也可以注册组件并引用

比如下面案例中点击计数的按钮，定义为组件后多次使用更为方便

案例：

<!DOCTYPE html>
<html lang="en">
  <head>
    <meta charset="UTF-8" />
    <meta http-equiv="X-UA-Compatible" content="IE=edge" />
    <meta name="viewport" content="width=device-width, initial-scale=1.0" />
    <title>vue</title>
    <script src="../JS/vue.js"></script>
  </head>
  <body>
    <div id="root">
      <counter></counter>
      <counter></counter>
    </div>
    <script>
      // 定义组件
      const counterTemp = {
        template: `<button @click="num++">你点击了{{num}}次}</button>`,
        // 定义组件使用到的数据属性
        data() {
          return {
            num: 0,
          };
        },
      };

      // 全局注册组件：在所有的vue实例中都可以使用组件
      // 参数1：组件名称
      // 参数2：具体的组件
      // Vue.component("counter",counterTemp)

      var vm = new Vue({
        el: "#root",
        // 局部注册组件：只能在当前Vue实例中使用
        components: {
          // 组件名称：具体组件
          counter: counterTemp,
        },
      });
    </script>
  </body>
</html>

组件的定义必须放在Vue创建对象之前

子与父组件之间无法直接使用对方数据，所以为了达成父组件向子组件通信，要让子组件中的属性与父组件中的属性进行关联绑定, 然后子组件使用该属性, 这样才能做到数据传递

2.父组件向子组件通信

<!DOCTYPE html>
<html lang="en">
  <head>
    <meta charset="UTF-8" />
    <meta http-equiv="X-UA-Compatible" content="IE=edge" />
    <meta name="viewport" content="width=device-width, initial-scale=1.0" />
    <title>vue</title>
    <script src="../JS/vue.js"></script>
  </head>
  <body>
    <div id="root">
      <!-- 把父组件中的count传递给子组件中的number属性 -->
      <aaa :number="count" :ids="arr" :person="p"></aaa>
    </div>

    <script>
      var aaa = {
        // 定义组件的模板
        template: `<h2>{{num}}---{{number}}---{{ids}}---{{person}}</h2>`,
        // 定义组件中使用到的数据属性
        data() {
          return {
            num: 0,
          };
        },
        // 给组件添加属性
        props: {
          number: "",
          // 数组属性
          ids: [],
          // 对象属性
          person: {}
        },
      };

      // 注册：全局注册
      // "组件名称",具体组件
      Vue.component("aaa", aaa);

      var vm = new Vue({
        el: "root",
        // 定义父组件的数据
        data: {
          count: 5,
          arr: [1, 2, 3],
          p: { username: "mkbk", age: 23 },
        },
      });
    </script>
  </body>
</html>

3.子组件向父组件通信

子组件调用父组件的方法，进而影响到父组件中的数据

<div id="app">
    <h1>父组件中:app_num={{app_num}}</h1>
    <!-- 把父组件的add方法,绑定给子组件的aaa属性,绑定方法使用@属性名="方法名" -->
    <!-- 把父组件的rem方法,绑定给子组件的bbb属性,绑定方法使用@属性名="方法名 -->
    <!-- 把父组件的app_num变量,绑定给子组件的counter_num属性,绑定变量使用:属性名="方法名 -->
    <counter @aaa="add" @bbb="rem" :counter_num="app_num"></counter>
</div>

<script>
    //定义一个组件(模版)
    let counter = {
        template: `
             <div>
                   <h1>子组件中:counter_num={{counter_num}}</h1>
                   <input type="button" @click="fun1" value="+"/>
                   <input type="button" @click="fun2" value="-"/>
            </div>
                `,
        props:{
            //定义属性counter_num,用来接收父组件传递的数据
            counter_num:null,
            //定义aaa属性,用来绑定父组件的方法,当然,该定义也可以省略
            aaa:function(){},
            //定义bbb属性,用来绑定父组件的方法,当然,该定义也可以省略
            bbb:function(){},
        },       
        methods:{
            fun1(){
                //找到aaa属性所绑定的那个方法,执行那个方法
                return this.$emit("aaa");
            },
            fun2(){
                //找到bbb属性所绑定的那个方法,执行那个方法
                return this.$emit("bbb");
            }
        }
    }

    var app = new Vue({
        el: '#app',
        data: {
            app_num: 0
        },
        components: {
            counter
        },
        methods:{
            add(){
                this.app_num++;
            },
            rem(){
                this.app_num--;
            }
        }
    });
</script>

4.组件的嵌套

<!DOCTYPE html>
<html>
	<head>
		<meta charset="UTF-8" />
		<title>组件的嵌套</title>
		<!-- 引入Vue -->
		<script type="text/javascript" src="../js/vue.js"></script>
	</head>
	<body>
		<!-- 准备好一个容器-->
		<div id="root">
			
		</div>
	</body>

	<script type="text/javascript">
		Vue.config.productionTip = false //阻止 vue 在启动时生成生产提示。

		//定义student组件
		const student = Vue.extend({
			name:'student',
			template:`
				<div>
					<h2>学生姓名：{{name}}</h2>	
					<h2>学生年龄：{{age}}</h2>	
				</div>
			`,
			data(){
				return {
					name:'123',
					age:18
				}
			}
		})
		
		//定义school组件
		const school = Vue.extend({
			name:'school',
			template:`
				<div>
					<h2>学校名称：{{name}}</h2>	
					<h2>学校地址：{{address}}</h2>	
					<student></student>
				</div>
			`,
			data(){
				return {
					name:'123',
					address:'123'
				}
			},
			//注册组件（局部）
			components:{
				student
			}
		})

		//定义hello组件
		const hello = Vue.extend({
			template:`<h1>{{msg}}</h1>`,
			data(){
				return {
					msg:'welcome'
				}
			}
		})
		
		//定义app组件
		const app = Vue.extend({
			template:`
				<div>	
					<hello></hello>
					<school></school>
				</div>
			`,
			components:{
				school,
				hello
			}
		})

		//创建vm
		new Vue({
			template:'<app></app>',
			el:'#root',
			//注册组件（局部）
			components:{app}
		})
	</script>
</html>

5.单文件组件

意义：需避免单个界面的功能过于复杂的情况
作用：复用编码，简化项目编程，提高运行效率

  • School.vue:
<template>
    <div id='Demo'>
        <h2>学校名称：{{name}}</h2>
        <h2>学校地址：{{address}}</h2>
        <button @click="showName">点我提示学校名</button>
    </div>
</template>

<script>
    export default {
        name:'School',
        data() {
            return {
                name:'123',
                address:'123'
            }
        },
        methods: {
            showName(){
                alert(this.name)
            }
        },
    }
</script>

<style>
    #Demo{
        background: orange;
    }
</style>
  • Student.vue:
<template>
    <div>
        <h2>学生姓名：{{name}}</h2>
        <h2>学生年龄：{{age}}</h2>
    </div>
</template>

<script>
    export default {
        name:'Student',
        data() {
            return {
                name:'JOJO',
                age:20
            }
        },
    }
</script>
  • App.vue:
<template>
    <div>
        <School></School>
        <Student></Student>
    </div>
</template>

<script>
    import School from './School.vue'
    import Student from './Student.vue'

    export default {
        name:'App',
        components:{
            School,
            Student
        }
    }
</script>
鸡蛋灌饼侠
关注
专栏目录
vue组件
weixin_45701868的博客
05-28 1万+
目录 1.Vue组件的定义、注册方式和模板使用 1.1 组件的定义 定义组件 定义组件名的方式有两种 1.2 组件的分类 1.3 引用模版 2. 组件间数据的通信 2.1 父子组件 2.2 组件间数据通信 2.2.1 子组件访问父组件的数据（父传子） 2.2.2 父组件访问子组件的数据（子传父） 2.2.3 非父子通信 2.2.4 总结组件之间的通讯 2.3 单向数据流 3.过滤器 过滤器分为两种 过滤器使用地方两个位置 全局过滤器 局部过滤器 4.路由 4.1 定
vue组件传值的13种方式
热门推荐
dan_seek的博客
10-19 5万+
vue组件传值 不写这篇文章，我自己都不知道我知道的vue组件传值的方式竟然有13种之多，其实静下来想想，常用的也有五六种。 1、父组件传给子组件 在子组件里定义一个props,即props:[‘msg’]，msg可以是对象也可以是基本数据类型 如果你想定义一个默认值，即 props:{msg: {type: String, default: ‘hello world’}}, 需要注意的是这种传值是...
vue组件如何被其他项目引用
01-19
自己写的vue组件怎么才能让其他人引用呢，或者是共用组件如何让其他项目引用。本文就粗细的介绍下，如有疑问欢迎共同讨论。在这里你能了解下如下知识点： 1. 如何发布一个包到npmjs仓库上 2.如何引用一个npm包，尤其...
详解vue 组件
10-15
在这个详解中，我们将深入探讨Vue组件，这是Vue应用开发中的基石。 首先，Vue的两大核心特性是： 1. **数据驱动** - Vue采用响应式系统，使得数据的变化能够自动反映到视图上。当你更改Vue实例的数据时，与其相关...
VUE组件入门
04-10
VUE组件入门，很基础的ppt，入门的同学可以看下哦！！
vue 组件简介
10-15
主要介绍了vue组件的相关资料，文中讲解非常细致，代码帮助大家更好的理解和学习，感兴趣的朋友可以了解下
Vue + SpringBoot 实现文件的断点上传、秒传，存储到Minio
m0_73179389的博客
06-19 530
前端页面使用的elment-plus的el-upload组件。当上传文件后，会调用handleChange 方法，可以在这里进行文件相关的操作。计算文件的MD5值。
JS面试题第一章
2301_79858637的博客
06-19 350
undefined表示的是无的原始值。但是null表示的是无 对象 0。
javaWeb项目-ssm+vue企业台账管理平台功能介绍
weixin_42874480的博客
06-20 942
Tomcat 虽然是Apache的扩展，但是它们都是可以独立运行的，二者是不互相干扰的。当配置正确的时候，Apache服务器为HTML页面的运行提供技术支持，Tomcat 的任务则是运行Servle和java 页面。Tomca也具有一定的HTML页面处理功能。Tomcat属于一种轻型的服务器，所以说在中小企业中并不具有普适性。但是当程序员需要开发或调试java 程序时，则通常会将该服务器作为首选。
vue2 + Lodop 制作可视化设计页面 实现打印设计功能（一）
Qiyandays的博客
06-21 324
vue + Lodop 制作可视化设计页面 实现打印设计功能
一个很好用的地图工具的使用：思极地图，以及vue+思极地图的使用
浩星
06-18 450
思极地图，给我们带来了很多便利，这里分享下他的信息与使用。
vue:对三种获取更新后的dom的方式进行分析
qq_45820271的博客
06-17 739
由于vue的异步更新机制，我们在同步代码中是无法获取到更新后的dom的信息的针对这个问题，我们有三种解决方案获取更新后的dom:3.在微任务中获取因为更新是在同步任务结束后，执行微任务之前，所以上面三种方式可以得到更新后的dom。
Vue66-vue-默认插槽
qq_31532983的博客
06-20 325
默认插槽、具名插槽、作用域插槽
express+vue 在线五子棋(一)
最新发布
qq_42451776的博客
06-23 965
示例 本期难点 1、完成了五子棋的布局，判断游戏结束 2、基本的在线对战 3、游戏配套im(这个im的实现，请移步在线im) 下棋安排 1、每步的倒计时设置 2、黑白棋分配由玩家自定义 3、新增旁观者 4、悔棋 5、自行创建一盘棋局 感兴趣的，还请点个免费的收藏与关注，后续会一直跟进这个系列 前端部分五子棋布局与游戏输赢判断 <template> <div class="flex-wrap flex-justify-between"> <div cla
elementUI的table使用展开功能( type=“expand“ ),展开时合起上一次展开的内容,始终保持展开内容为一个,并且再次点击合起自身
weixin_54930261的博客
06-20 343
直接上代码了没什么可讲的,主要是用到。
vue实例是不是vue组件
07-30
Vue实例和Vue组件是两个不同的概念。 Vue实例是Vue框架的核心概念，它是通过Vue构造函数创建的对象。Vue实例是Vue应用的根实例，它包含了Vue的各种选项和方法，可以用来定义数据、方法、计算属性、监听属性等。通过...

“相关推荐”对你有帮助么？

  • 非常没帮助
  • 没帮助
  • 一般
  • 有帮助
  • 非常有帮助
提交
评论 4
添加红包

请填写红包祝福语或标题

个

红包个数最小为10个

元

红包金额最低5元

当前余额3.43元 前往充值 >
需支付：10.00元
成就一亿技术人!
领取后你会自动成为博主和红包主的粉丝 规则
hope_wisdom
发出的红包
实付元
使用余额支付
点击重新获取
扫码支付
钱包余额 0

抵扣说明：

1.余额是钱包充值的虚拟货币，按照1:1的比例进行支付金额的抵扣。
2.余额无法直接购买下载，可以购买VIP、付费专栏及课程。

余额充值