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

2024-10-05 01:58:24

一、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之父子组件间通信实例讲解(props、$ref、$emit)

组件是 vue.js 最强大的功能之一,而组件实例的作用域是相互独立的,这就意味着不同组件之间的数据无法相互引用.那么组件间如何通信,也就成为了vue中重点知识了.这篇文章将会通过props.$ref和 $emit 这几个知识点,来讲解如何实现父子组件间通信. 在说如何实现通信之前,我们先来建两个组件father.vue和child.vue作为示例的基础. //父组件 <template> <div> <h1>我是父组件!</h1> <child>
Vue 关于$emit与props的使用示例代码

目录一.props 和 $emit 二.示例一.props 和 $emit 1.子组件向父组件传值,通过$emit 事件向父组件发送消息,将自己的数据传递给父组件. 2.props 可以在组件上注册一些自定义属性.父组件通过绑定该属性来向子组件传入数据,子组件通过 props 属性获取对应数据. 二.示例 1.父组件 // parent.vue <template> <div> <p>childMessage: {{childMessage}}</p>
vue 2.0 购物车小球抛物线的示例代码

本文介绍了vue 2.0 购物车小球抛物线的示例代码,分享给大家,具体如下: 备注:此项目模仿饿了吗.我用的是最新的Vue, 视频上的一些写法已经被废弃了. 布局代码 <div class="ball-container"> <transition name="drop" v-for="ball in balls" @before-enter="beforeDrop" @enter="droppi
vue+element实现动态换肤的示例代码

有时候一个项目的主题并不能满足所有人的审美,这时候换肤功能就很友好,本项目基于vue+element实现后台管理项目的换肤功能 1.创建换肤组件 <template> <el-color-picker class="theme-picker" popper-class="theme-picker-dropdown" v-model="theme" :predefine="predefineColors" &g
vue+element 实现商城主题开发的示例代码

本文介绍了vue+element 实现商城主题开发的示例代码,分享给大家,具体如下: <template> <div> <div class="set-phone"> <el-form :model="theme" :rules="rules" ref="ruleForm" class="demo-ruleForm"> <el-form-item lab
Vue实现仿iPhone悬浮球的示例代码

悬浮球插件简单的效果图: 很遗憾,没找到太好的视频转gif的软件,压缩出来的大小超过了限制,就不放图了可以参考其他人的图,效果一致: 简单实用案例:  <xuanfuqiu :position="position"> <d-add-button @click="addPigFarm" add-item="猪场"></d-add-b
vue组件中使用iframe元素的示例代码

本文介绍了vue组件中使用iframe元素的示例代码,分享给大家,具体如下: 需要在本页面中展示vue组件中的超链接,地址栏不改变的方法: <template> <div class="accept-container"> <div class="go-back" v-show="goBackState" @click="goBack">GoBack</div> <ul&g
使用Vue调取接口,并渲染数据的示例代码

刚接触vue.js框架的时候,很伤脑筋.今天整理一下post/get两种方式,简单的调取数据库数据,并进行渲染,希望帮助大家! 首先,在HTML页面引入: //引入vue.js文件 <script src="https://cdn.staticfile.org/vue/2.4.2/vue.min.js"></script> 引入vue-resource.min.js文件,就可以引入接口方法了 <script src="https://cdn.st
Vue+mui实现图片的本地缓存示例代码

下面一段代码给大家分享基于Vue+mui实现图片的本地缓存,具体代码如下所示: const menu = { state: { products: {}, GLOBAL_CONFIG:GLOBAL_CONFIG['GLOBAL_CONFIG'] }, mutations: { get_product: function (state, products) { //商品列表 state.products = products; for(let i = 0; i < state.products.l
Vue微信公众号网页分享的示例代码

前言今天做了个分享功能,反正挺诡异的,下面就来说一说步骤后端使用egg.js,代码如下: 'use strict'; const Subscription = require('egg').Subscription; class AccessToken extends Subscription { static get schedule() { return { interval: '2h',//2小时获取一次 type: 'all', }; } async subscribe() { co
vue使用exif获取图片经纬度的示例代码

我上一篇文章写了怎么压缩图片和旋转.这篇写一下怎么看图片的经纬度注意!!! 只有原图有大量的元数据信息.通过拍照软件如:b612等,拍摄的照片是软件处理过的,所以一定要使用原图来擦查询下面贴以下代码. <template> <div> <input type="file" id="upload" accept="image" @change="upload" /> <span>

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

目录

一、props 和 $emit

二、示例

相关推荐

随机推荐