前端vue入门(纯代码)09

news2024/11/15 12:41:56

【09.vue中组件的自定义事件】

自定义组件链接

  • 在vue中用的click【点击】、keyup【按键】……等事件，这些属于内置事件，也就是js自带的事件。

问题一：什么是组件自定义事件呢？

  • 【内置事件】:是给html元素用的，比如span、div等标签，不是组件。
  • 【自定义事件】：顾名思义就是自己打造的事件，包含事件名，事件回调函数等，定义好之后去给组件使用。也是一种组件间的通信方式，适用于子组件==>父组件。这里我们通过传值去讲述自定义事件如何使用。

问题二：如何实现子组件给父组件传值？

(1）利用props传值实现

​ 通过props也可以实现，先定义父子组件，school是父组件，student是子组件。

School.vue父组件

  • props传值：父组件需要提前给子组件一个函数【getStudentName】，子组件用props声明接收那个函数【getStudentName】

  • 注意：使用props属性时，需要使用冒号来区别传入的是双引号里面的内容还是字符串，这里我们传的是一个函数，因此需要用冒号去识别函数名

  • 具体写法对应是：

     <Student :子组件发送数据时调用的方法名="父组件接收数据的方法名"> </Student>
 <Student :getStudentName="getStudentName"/>

<template>
	<div class="school">
    <h1>父组件:School</h1>
    <Student :getStudentName="getStudentName"/>
    <h1>子组件Student传过来的值：{{ StudentName }}</h1>
	</div>
</template>

<script>
import Student from './Student';
export default {
	name: 'School',
    components: {Student},
	data() {
		return {
           StudentName:'',
		};
	},
	methods: {
    getStudentName(name){
      console.log('School收到了学生名：',name)
      this.StudentName= name
    }
  },
};
</script>

<style scoped>
.school {
	background-color: rgb(73, 192, 150);
}
</style>

Student.vue子组件

  • 首先需要用props声明接收父组件传的函数【getStudentName】。然后给按钮添加点击事件，通过点击来触发点击事件，从而调用sendStudentlName(name)方法【带参数:子组件中的参数name: '何大春'】，在该方法中调用已经声明过的父组件中的函数getStudentName(Studentname)，并传入你要传递的数据参数，这就已经实现子组件向父组件传参，最后将该参数在父组件的模板中展示出来即可。

  • props子组件给父组件传递数据的过程就是：

    • 子组件通过调用父组件传过来接收子组件数据的方法，来实现子组件数据向父组件的传递。
<template>
	<div class="student">
    <h1>子组件信息</h1>
		<h2>学生姓名：{{ name }}</h2>
		<h2>学生性别：{{ sex }}</h2>
		<h2>学生年龄：{{ age }}</h2>
		<h2>学生成绩：{{ score }}</h2>
    <!-- 点击事件触发，调用函数sendStudentlName(name)，并给该函数传一个data里面的参数name -->
		<button class="haha" @click="sendStudentlName(name)"><h2>点击此处给父组件School传值</h2></button>
	</div>
</template>

<script>
export default {
	name: 'Student',
  props:['getStudentName'],
	data() {
		return {
			name: '何大春',
			sex: '男',
			age: '22',
			score: '88',
		};
	},
	methods: {
    // 这里的Studentname就是name,别搞混了，我随便命名的
		sendStudentlName(Studentname) {
         // 调用父组件中的函数，并把子组件中的参数name传给父组件
         this.getStudentName(Studentname)
    },
	},
};
</script>

<style lang="less" scoped>
.student {
	background-color: tomato;
	padding: 50px;
	margin-top: 50px;
	margin-left: 50px;
	width: 300px;
	height: 350px;
}
.h2 {
  padding: 5px;
  margin: 5px 5px 5px 5px;
}
.haha {
  background-color: rgb(211, 233, 130);
}
</style>

App.vue组件

<template>
  <div> 
    <School/>
  </div>
</template>

<script>
import School from "./components/School";
export default {
	name: 'App',
  components: {School},
	data() {
		return {};
	},
};
</script>

界面展示：

在这里插入图片描述

在这里插入图片描述

(2）利用组件自定义事件实现父子传值

​ 组件自定义事件需要用到v-on，也就是v-on在谁身上，就是在谁的组件实例上绑定了事件。

  • ①在父组件School中给子组件Student绑定一个自定义事件getName

    <!-- 给子组件的实例对象VC绑定了事件getName，该事件触发会调用函数getStudentName -->
    <Student v-on:getName="getStudentName"/>

  • ②如何触发自定义事件getName：在谁身上定义的就找谁触发，所以，我们需要找子组件的实例对象VC触发

    • 在子组件Student的实例对象上去，触自定义事件getName：this.$emit('getName',参数1,...,参数n)

  • 子组件传入参数。不传参数就是单纯的触发父组件对应的函数。

    sendStudentlName() {
      // 触发自定义事件getName，并把子组件中的参数name传给父组件
      this.$emit('getName',this.name,this.age,this.score)
    },

  • 父组件接收子组件的参数

    	methods: {
/*     getStudentName(name,age,score){
      console.log('School收到了学生名：',name,age,score)
      this.StudentName= name
    } */
    // 可以传多个参数【...params】
    getStudentName(name,...params){
      console.log('School收到了学生名：',name,params)
      // School收到了学生名： 何大春 (2) ['22', '88']
      this.StudentName= name
      this.StudentAge = params[0]
    }
  },

完整代码：

School.vue父组件【样式不变，还是上面的样式】

<template>
	<div class="school">
    <h1>父组件:School</h1>
    <!-- 给子组件的实例对象VC绑定了事件getName，该事件触发会调用函数getStudentName -->
    <Student v-on:getName="getStudentName"/>
    <h1>子组件Student传过来的name：{{ StudentName }}</h1>
    <h1>子组件Student传过来的age：{{ StudentAge }}</h1>
	</div>
</template>

<script>
import Student from './Student';
export default {
	name: 'School',
  components: {Student},
	data() {
		return {
      StudentName:'',
      StudentAge:'',
		};
	},
	methods: {
/*     getStudentName(name,age,score){
      console.log('School收到了学生名：',name,age,score)
      this.StudentName= name
    } */
    // 可以传多个参数【...params】
    getStudentName(name,...params){
      console.log('School收到了学生名：',name,params)
      // School收到了学生名： 何大春 (2) ['22', '88']
      this.StudentName= name
      this.StudentAge = params[0]
    }
  },
};
</script>

Student.vue子组件

<template>
	<div class="student">
    <h1>子组件信息</h1>
		<h2>学生姓名：{{ name }}</h2>
		<h2>学生性别：{{ sex }}</h2>
		<h2>学生年龄：{{ age }}</h2>
		<h2>学生成绩：{{ score }}</h2>
    <!-- 点击事件触发，调用函数sendStudentlName(name)，并给该函数传一个data里面的参数name -->
	<!-- <button class="haha" @click="sendStudentlName(name)">
     <h2>点击此处给父组件School传值</h2></button> -->
		<button class="haha" @click="sendStudentlName()">
      <h2>点击此处给父组件School传值</h2></button>
	</div>
</template>

<script>
export default {
	name: 'Student',
	data() {
		return {
			name: '何大春',
			sex: '男',
			age: '22',
			score: '88',
		};
	},
	methods: {
    // 这里的Studentname就是name,别搞混了，我随便命名的
/*     sendStudentlName(Studentname) {
      // 触发自定义事件getName，并把子组件中的参数name传给父组件
      this.$emit('getName',Studentname)
    }, */
		sendStudentlName() {
      // 触发自定义事件getName，并把子组件中的参数name传给父组件
      this.$emit('getName',this.name,this.age,this.score)
    },
	},
};
</script>
  • 【简写】:v-on的简写形式就是@

(3）利用ref实现父子传值

​ ref相当于一个组件的标识，可以直接拿到该组件的实例对象。

  • ref 加在子组件上，用this.$refs.（ref值） 获取到的是组件实例vc，可以使用组件的所有方法和属性。

        <Student ref="studentRef"/>

  • 如何通过ref去绑定自定义事件：通过**$on**

    // 当父组School件挂载完毕时，通过$on去绑定自定义事件，以及调用的函数。
  mounted() {   
   this.$refs.studentRef.$on('getName',this.getStudentName)
      
    // 自定义事件只触发一次
    // this.$refs.studentRef.$once('getName',this.getStudentName)
  },

  • 好处是：虽然麻烦但灵活性强，比如我们想3秒之后再调用这个事件我们可以直接添加一个定时器:

    // 3s之前，不会触发；3秒钟过后，才能触发该自定义事件
    setTimeout(() => {
      this.$refs.studentRef.$on('getName',this.getStudentName)
    }, 3000);

只想触发一次函数，怎么办？

  • 第一种ref形式，将$on，改为$once

        // 自定义事件只触发一次
    this.$refs.studentRef.$once('getName',this.getStudentName)

  • 第二种 自定义事件的，添加once修饰符

    <Student v-on:getName.once="getStudentName"/>
<!-- <Student @getName.once="getStudentName"/> -->

完整代码：

School.vue父组件【样式不变，还是上面的样式】

<template>
	<div class="school">
    <h1>父组件:School</h1>
    <!-- <Student v-on:getName.once="getStudentName"/> -->
    <!-- <Student @getName.once="getStudentName"/> -->
    <Student ref="studentRef"/>
    <h1>子组件Student传过来的name：{{ StudentName }}</h1>
    <h1>子组件Student传过来的age：{{ StudentAge }}</h1>
	</div>
</template>

<script>
import Student from './Student';
export default {
	name: 'School',
  components: {Student},
	data() {
		return {
      StudentName:'',
      StudentAge:'',
		};
	},
	methods: {
/*     getStudentName(name,age,score){
      console.log('School收到了学生名：',name,age,score)
      this.StudentName= name
    } */
    // 可以传多个参数【...params】
    getStudentName(name,...params){
      console.log('School收到了学生名：',name,params)
      // School收到了学生名： 何大春 (2) ['22', '88']
      this.StudentName= name
      this.StudentAge = params[0]
    }
  },
  // 当父组件挂载完毕时，通过$on去绑定自定义事件，以及调用的函数。
  mounted() {
    // 3s之前，不会触发；3秒钟过后，才能触发该自定义事件
    /* setTimeout(() => {
      this.$refs.studentRef.$on('getName',this.getStudentName)
    }, 3000); */
    this.$refs.studentRef.$on('getName',this.getStudentName)
    // 事件只触发一次
    // this.$refs.studentRef.$once('getName',this.getStudentName)
  },
};
</script>

Student.vue子组件

<template>
	<div class="student">
    <h1>子组件信息</h1>
		<h2>学生姓名：{{ name }}</h2>
		<h2>学生性别：{{ sex }}</h2>
		<h2>学生年龄：{{ age }}</h2>
		<h2>学生成绩：{{ score }}</h2>
    <!-- 点击事件触发，调用函数sendStudentlName(name)，并给该函数传一个data里面的参数name -->
		<!-- <button class="haha" @click="sendStudentlName(name)"><h2>点击此处给父组件School传值</h2></button> -->
		<button class="haha" @click="sendStudentlName()">
      <h2>点击此处给父组件School传值</h2></button>
	</div>
</template>

<script>
export default {
	name: 'Student',
	data() {
		return {
			name: '何大春',
			sex: '男',
			age: '22',
			score: '88',
		};
	},
	methods: {
    // 这里的Studentname就是name,别搞混了，我随便命名的
/*     sendStudentlName(Studentname) {
      // 触发自定义事件getName，并把子组件中的参数name传给父组件
      this.$emit('getName',Studentname)
    }, */
		sendStudentlName() {
      // 触发自定义事件getName，并把子组件中的参数name传给父组件
      this.$emit('getName',this.name,this.age,this.score)
    },
	},
};
</script>
总结：

  1. 一种组件间通信的方式，适用于：子组件 ===> 父组件

  2. 使用场景：A是父组件，B是子组件，B想给A传数据，那么就要在A中给B绑定自定义事件（事件的回调在A中）。

  3. 绑定自定义事件：

    • 第一种方式，在父组件中：<Demo @getName="test"/>或 <Demo v-on:getName="test"/>

    • 第二种方式，在父组件中：

    <Demo ref="demo"/>
......
mounted(){
   this.$refs.xxx.$on('getName',this.test)
}
    • 若想让自定义事件只能触发一次，可以使用once修饰符，或$once方法。

  4. 触发自定义事件：this.$emit('getName',数据)

  5. 解绑自定义事件this.$off('getName')

  6. 组件上也可以绑定原生DOM事件，需要使用native修饰符。

  7. 注意：通过this.$refs.xxx.$on('getName',回调函数)绑定自定义事件时，回调要么配置在methods中，要么用箭头函数，否则this指向会出问题！

   <Demo ref="demo"/>
   ......
   mounted(){
      this.$refs.xxx.$on('getName',this.test)
   }
  • 若想让自定义事件只能触发一次，可以使用once修饰符，或$once方法。

  1. 触发自定义事件：this.$emit('getName',数据)

  2. 解绑自定义事件this.$off('getName')

  3. 组件上也可以绑定原生DOM事件，需要使用native修饰符。

  4. 注意：通过this.$refs.xxx.$on('getName',回调函数)绑定自定义事件时，回调要么配置在methods中，要么用箭头函数，否则this指向会出问题！

本文来自互联网用户投稿，该文观点仅代表作者本人，不代表本站立场。本站仅提供信息存储空间服务，不拥有所有权，不承担相关法律责任。如若转载，请注明出处：http://www.coloradmin.cn/o/657419.html

如若内容造成侵权/违法违规/事实不符，请联系多彩编程网进行投诉反馈，一经查实，立即删除！

相关文章

UG\NX二次开发 加密锁（加密狗）

UG\NX二次开发 加密锁（加密狗）

文章作者：里海 来源网站：https://blog.csdn.net/WangPaiFeiXingYuan 加密锁简介 加密狗是一种用于保护软件版权的技术手段，它可以限制未经授权的用户在未经许可的情况下使用某些软件。软件加密锁可以保护软件开发商的知识产权，防止盗版和非法复制等行为，同时也可以…
阅读更多...
React 对比class与Effect Hook优化响应式数据更新监听，感受useEffect真正的强大

React 对比class与Effect Hook优化响应式数据更新监听，感受useEffect真正的强大

还是之前写过的一个组件 import React from "react"export default class index extends React.Component{constructor(props){super(props);this.state {name: "小猫猫"}}componentDidMount ()>{document.title this.state.name;}componentDidUpda…
阅读更多...
msvcr110.dll,丢失修复，msvcr110.dll,丢失修复详细解决办法

msvcr110.dll,丢失修复，msvcr110.dll,丢失修复详细解决办法

我们在运行软件程序或者游戏的时候&#xff0c;如果程序提示“无法启动此程序&#xff0c;因为计算机中丢失msvcr110.dll。尝试重新安装该程序以解决此问题”&#xff0c;如果说明您电脑系统中缺少或者未注册msvcr110.dll这个运行库文件&#xff0c;那么我们要如何解决这个问题…
阅读更多...
Node内存管理+垃圾回收机制

Node内存管理+垃圾回收机制

最近看到《深入浅出node》这本书&#xff0c;里面正好有内存控制&#xff0c; 加上最近看到一篇文章&#xff0c;也是讲了内存管理和垃圾回收机制。 由于自己曾经做过一个ssl接口&#xff0c;导致node服务经常重启&#xff0c;我潜意识就怀疑是内存管理出现了问题&#xff0c;…
阅读更多...
H264 NALU分析

H264 NALU分析

标题 1.H264介绍2.H264编解码解析2.1. H264编码原理2.2 H264的I帧,P帧,B帧2.3 H264编码结构解析2.4 NALU2.4.1 NALU结构2.4.2 解析NALU2.4.3 annexb模式 1.H264介绍 H.264从1999年开始&#xff0c;到2003年形成草案&#xff0c;最后在2007年定稿有待核实。在ITU的标准⾥称为H.…
阅读更多...
Ansible Playbook

Ansible Playbook

Ansible 的脚本 --- playbook 剧本 playbooks 本身由以下各部分组成 &#xff08;1&#xff09;Tasks&#xff1a;任务&#xff0c;即通过 task 调用 ansible 的模板将多个操作组织在一个 playbook 中运行 &#xff08;2&#xff09;Variables&#xff1a;变量 &#xff08;3&…
阅读更多...
Postman接口测试之：添加Cookie伪造请求

Postman接口测试之：添加Cookie伪造请求

1&#xff0c;获取cookie值 登录某网站&#xff0c;通过开发者工具&#xff08;或者fiddler抓包工具&#xff09;&#xff0c;获取登录成功后的请求头中的cookie值。 大家肯定奇怪&#xff0c;明明访问首页的时候就已经生成了cookie值&#xff0c;为什么还登录呢&#xff1f;…
阅读更多...
Linux中磁盘管理之格式化、分区、挂载-详解

Linux中磁盘管理之格式化、分区、挂载-详解

今天给大家介绍一下Linux中磁盘管理中格式化、分区、挂载等操作步骤&#xff0c;希望这篇文章对大家有所帮助。 一、磁盘知识 1.磁盘含义 磁盘&#xff08;Disk&#xff09;是一种用于存储和读取数据的物理设备&#xff0c;它由一个或多个旋转的磁性盘片组成。这些盘片通常由…
阅读更多...
递归算法学习

递归算法学习

递归算法介绍 递归指的是函数或算法在执行过程中调用自身。在递归的过程中&#xff0c;程序会不断地将自身的执行过程压入调用栈中&#xff0c;直到满足某个条件结束递归调用并开始返回。递归算法常用于解决一些具有递归结构的问题&#xff0c;比如树、图、排序等。递归算法可以…
阅读更多...
5.controller部署nova服务

5.controller部署nova服务

nova 服务是 OpenStack service 计算服务&#xff0c;负责维护和管理云环境的计算资源&#xff1b; 例如&#xff1a; 接收客户端请求需要的计算资源&#xff1b; 确定实例在哪个物理机上创建&#xff1b; 通过虚机化的方式将实例启动运行等工作。 controller节点 在安装和配…
阅读更多...
JAVA为什么要面向对象

JAVA为什么要面向对象

JAVA是一个面向对象的语言 ok&#xff0c;我们开始&#xff0c;用了那么久的java&#xff0c;看了那么多代码&#xff0c;你是否懂得了面向对象&#xff0c;今天我们的第一个问题就是&#xff0c;为什么java要面向对象&#xff0c;要解释为啥要面向对象&#xff0c;我们首先要…
阅读更多...
Python selenium自动化测试模型图解

Python selenium自动化测试模型图解

1、线性测试 优势&#xff1a;每一个脚本都是完整独立的&#xff0c;每一个脚本对应一个测试用例 缺点&#xff1a;开发成本高&#xff0c;会有重复操作重复脚本&#xff1b;维护成本也高&#xff0c;修改重复操作的脚本时&#xff0c;要逐一进行修改。 2、模块化驱动测试 …
阅读更多...
2023年计算机专业毕业实习报告最新

2023年计算机专业毕业实习报告最新

2023年计算机专业毕业实习报告最新篇1 一、实习基本情况 按照学校对毕业生的要求&#xff0c;为毕业后的工作和谋职打下良好的基础。我于X年X月来到山西柳林汇丰兴业同德焦煤有限公司进行为期X个月的实习。毕业实习让我们想起那句老话&#xff1a;“让学生赢在起跑线上。”在学…
阅读更多...
验证性实验 - 线性回归

验证性实验 - 线性回归

练习1&#xff1a;线性回归 介绍 在本练习中&#xff0c;您将实现线性回归并了解其在数据上的工作原理。 在开始练习前&#xff0c;需要下载如下的文件进行数据上传&#xff1a; ex1data1.txt -单变量的线性回归数据集ex1data2.txt -多变量的线性回归数据集 在整个练习中&a…
阅读更多...
马斯克撕下美国的遮羞布，美企纷纷背刺，外媒：可怕的还在后面

马斯克撕下美国的遮羞布，美企纷纷背刺，外媒：可怕的还在后面

马斯克访华造成的影响还在持续&#xff0c;随着更多美国企业家访华以及表明态度&#xff0c;可以说他们正撕下美国的遮羞布&#xff0c;今天的美国其实早已背离了当初他们所宣扬的价值&#xff0c;凸显出外强中干的本质。 二.美国企业家纷纷访华撕下美国遮羞布 美国一直都标榜贸…
阅读更多...
某购房通小程序解密分析【2023.6.17】

某购房通小程序解密分析【2023.6.17】

声明 本文以教学为基准、本文提供的可操作性不得用于任何商业用途和违法违规场景。 本人对任何原因在使用本人中提供的代码和策略时可能对用户自己或他人造成的任何形式的损失和伤害不承担责任。 如有侵权，请联系我进行删除。 主要对小程序返回的加密结果进行解密的分析过程只…
阅读更多...
如何在编程中中实现负载均衡和容错处理

如何在编程中中实现负载均衡和容错处理

什么是容错 容错是指系统&#xff08;计算机、网络、云集群等&#xff09;在其一个或多个组件发生故障时继续运行而不会中断的能力。 创建容错系统的目的是防止由单点故障引起的中断&#xff0c;确保任务关键型应用程序或系统的高可用性和业务连续性。 容错系统使用备份组件…
阅读更多...
DAY26：回溯算法（一）：回溯算法理论

DAY26：回溯算法（一）：回溯算法理论

课程链接&#xff1a;https://www.bilibili.com/video/BV1cy4y167mM/?spm_id_from333.788 什么是回溯法 回溯法 - OI Wiki (oi-wiki.org) 回溯法是一种经常被用在 深度优先搜索&#xff08;DFS&#xff09; 和 广度优先搜索&#xff08;BFS&#xff09; 的技巧。 其本质是…
阅读更多...
Elasticsearch 基本使用（一）写入数据

Elasticsearch 基本使用（一）写入数据

写入数据 查询索引状态写入一条数据查询数据按id查询一条 类比 getById不按id查 写入官方测试数据 查询索引状态 GET _cat/indices写入一条数据 PUT/POST my_index/_doc/1 {"k": "test key" }my_index&#xff1a;索引名 _doc&#xff1a;文档类型&#…
阅读更多...
css基础知识三：说说em/px/rem/vh/vw的区别?

css基础知识三：说说em/px/rem/vh/vw的区别?

一、介绍 传统的项目开发中&#xff0c;我们只会用到px、%、em这几个单位&#xff0c;它可以适用于大部分的项目开发&#xff0c;且拥有比较良好的兼容性 从CSS3开始&#xff0c;浏览器对计量单位的支持又提升到了另外一个境界&#xff0c;新增了rem、vh、vw、vm等一些新的计量…
阅读更多...
推荐文章
最新文章

Copyright @ 2022~2023