脚本之家 服务器常用软件
快捷导航
您的位置：首页 → 网络编程 → JavaScript → javascript类库 → vue.js → Vue $emit与props的使用

Vue 关于$emit与props的使用示例代码

 更新时间：2022年03月23日 15:28:27   作者：闲适_  
父组件使用 props 把数据传给子组件，子组件使用 $emit 触发父组件的自定义事件，今天通过示例给大家详细介绍下Vue 关于$emit与props的使用，感兴趣的朋友一起看看吧

一、props 和 $emit

1、子组件向父组件传值，通过$emit 事件向父组件发送消息，将自己的数据传递给父组件。

2、props 可以在组件上注册一些自定义属性。父组件通过绑定该属性来向子组件传入数据，子组件通过 props 属性获取对应数据。

二、示例

1.父组件

// parent.vue
<template>
	<div>
      	<p>childMessage: {{childMessage}}</p>
      	<children :sendmessage='childMessage' @showMsg="updataMsg"></children>
	</div>
</template>

import children from '/*...*/'
export default{
	data () {
		return {
			childMessage: '父组件给子组件传值'
		}
	},
	methods: {
		updataMsg(message) {
			this.childMessage = message
			console.log(this.childMessage)
	components: {
		children
	}
}

2.子组件

// children.vue
<template>
	<div>
		// 通过按钮点击事件将子组件的值传给父组件
	    <button @click="sendtoParent">Click this Button</button>
	</div>
</template>
<script>
export default {
  props: ['sendmessage'],
  methods: {
  	sendtoParent() {
  		//$emit括号里的第一个参数为自定义事件
  		this.$emit('showMsg','子组件通过$emit给父组件传值')
  	}
  }
}
</script>

结果展示

父子组件通信之前

在这里插入图片描述

父子组件通信之后

在这里插入图片描述

到此这篇关于Vue 关于$emit与props的使用的文章就介绍到这了,更多相关Vue $emit与props的使用内容请搜索脚本之家以前的文章或继续浏览下面的相关文章希望大家以后多多支持脚本之家！

您可能感兴趣的文章:

相关文章

  • vue学习之mintui picker选择器实现省市二级联动示例

    vue学习之mintui picker选择器实现省市二级联动示例

    本篇文章主要介绍了vue学习之mintui picker选择器实现省市二级联动示例，非常具有实用价值，需要的朋友可以参考下
    2017-10-10
  • Vue+webpack实现懒加载过程解析

    Vue+webpack实现懒加载过程解析

    这篇文章主要介绍了Vue+webpack实现懒加载过程解析,文中通过示例代码介绍的非常详细，对大家的学习或者工作具有一定的参考学习价值,需要的朋友可以参考下
    2020-02-02
  • Vuex状态机的快速了解与实例应用

    Vuex状态机的快速了解与实例应用

    Vuex是专门为Vuejs应用程序设计的状态管理工具,这篇文章主要给大家介绍了关于Vuex状态机快速了解与实例应用的相关资料,需要的朋友可以参考下
    2021-06-06
  • 基于 vue-skeleton-webpack-plugin 的骨架屏实战

    基于 vue-skeleton-webpack-plugin 的骨架屏实战

    这篇文章主要介绍了基于 vue-skeleton-webpack-plugin 的骨架屏实战，文中通过示例代码介绍的非常详细，对大家的学习或者工作具有一定的参考学习价值，需要的朋友们下面随着小编来一起学习学习吧
    2019-08-08
  • Vue3.x源码调试的实现方法

    Vue3.x源码调试的实现方法

    这篇文章主要介绍了Vue3.x源码调试的实现方法，文中通过示例代码介绍的非常详细，对大家的学习或者工作具有一定的参考学习价值，需要的朋友们下面随着小编来一起学习学习吧
    2019-10-10
  • 解决vue项目中前后端交互的跨域问题、nginx代理配置方式

    解决vue项目中前后端交互的跨域问题、nginx代理配置方式

    这篇文章主要介绍了解决vue项目中前后端交互的跨域问题、nginx代理配置方式，具有很好的参考价值，希望对大家有所帮助。如有错误或未考虑完全的地方，望不吝赐教
    2022-09-09
  • vue中使用pdfjs-dist + turnjs实现页面的翻书浏览功能

    vue中使用pdfjs-dist + turnjs实现页面的翻书浏览功能

    这篇文章主要介绍了vue中使用pdfjs-dist + turnjs实现页面的翻书浏览,通过本文学习我们知道了pdfjs-dist 的工作原理是把获取到的 pbf 的文件的数据流， 利用 canvas转换成图片，本文通过实例代码详解讲解，需要的朋友可以参考下
    2022-10-10
  • vue axios同步请求解决方案

    vue axios同步请求解决方案

    这篇文章主要介绍了vue axios同步请求解决方案,需要的朋友可以参考下
    2017-09-09
  • Vue Router如何刷新当前页面

    Vue Router如何刷新当前页面

    Vue项目, 在实际工作中, 有些时候需要在 加载完某些数据之后对当前页面进行刷新, 这篇文章主要为大家介绍了三种常用方法,需要的可以参考一下
    2023-10-10
  • antd upload上传组件如何获取服务端返回数据

    antd upload上传组件如何获取服务端返回数据

    这篇文章主要介绍了antd upload上传组件如何获取服务端返回数据问题，具有很好的参考价值，希望对大家有所帮助。如有错误或未考虑完全的地方，望不吝赐教
    2023-02-02

最新评论