<!--子组件页面-->
<template>
<div class="hello">
<!-- 添加一个input输入框 添加keypress事件-->
<input type="text" v-model="inputValue" @keypress.enter="enter">
<p>{{mes}}</p>
</div>
</template> <script>
export default {
props:['mes'], // 添加data, 用户输入绑定到inputValue变量,从而获取用户输入
data: function () {
return {
inputValue: ''
}
},
methods: {
enter () {
this.$emit("sendiptVal", this.inputValue)
//子组件发射自定义事件sendiptVal 并携带要传递给父组件的值,
// 如果要传递给父组件很多值,这些值要作为参数依次列出 如 this.$emit('valueUp', this.inputValue, this.mesFather);
}
}
}
</script>
<!--父组件页面-->
<template>
  <div>
    <p> father</p>
   <accept-and-refuse :mes=loginJson.animal @sendiptVal='showChildMsg'></accept-and-refuse>
  </div> </template> <script>
import AcceptAndRefuse from '@/components/public/AcceptAndRefuse' export default {
data() {
return { message:'hello message',
loginJson:{
"animal":"dog"
} },
mounted(){ },
methods: {
components:{
AcceptAndRefuse }
}
</script> <style> </style>

简单来说就是父组件在调用子组件的地方:mes=loginJson.animal 这样把值传过去,子组件props接收,子组件想更新父组件的时候在触发的地方$emit("父组件的方法名",要传的值),父组件那边在调用子组件的地方写 相同的方法名

vue 父子组件传值:props和$emit的更多相关文章

  1. Vue 父子组件传值 props

    1.Vue 的渲染周期: vue 如何实现响应式追踪. 父子组件通信有很多方式,今天单独聊下props 的方式.我们通过查找官方文档很容发现,props传值有静态和动态两种传值方式. 当然props ...

  2. vue父子组件传值加例子

    例子:http://element-cn.eleme.io/#/zh-CN/component/form         上进行改的 父传子:用prop:子组件能够改变父组件的值,是共享的,和父操作是 ...

  3. 一个故事讲懂vue父子组件传值

    作者:李佳明同学链接:https://www.jianshu.com/p/2272b6ca0f0c 一个故事讲懂vue父子组件传值 讲故事前先讲代码 父组件向子组件传值 父组件数据传递给子组件可以通过 ...

  4. 关于Vue父子组件传值(复杂数据类型的值)的细节点

    vue 父子组件传值是很常见的,多数情况下都是父传递给子的值是基础数据类型,如string,number,boolean, 当父组件值被修改时,子组件能够实时的作出改变. 如果父子传值的类型是复杂数据 ...

  5. vue 父子组件传值,兄弟组件传值

    父子组件中的传值 父向子    v-bind props <!-- 组件使用v-bind传值 --> <router :msg="msg"></rou ...

  6. vue 父子组件通信props/emit

    props 1.父组件传递数据给子组件 父组件: <parent> <child :childMsg="msg"></child>//这里必须要 ...

  7. vue 父子组件传值以及方法调用,平行组件之间传值以及方法调用大全

    vue项目经常需要组件间的传值以及方法调用,具体场景就不说了,都知道.基本上所有的传值都可以用vuex状态管理来实现,只要在组件内监听vuex就好. vue常用的传值方式以及方法有: 1. 父值传子( ...

  8. Vue父子组件传值以及父调子方法、子调父方法

    稍微总结了一下Vue中父子间传值以及相互调方法的问题,非常基础.希望可以帮到你!先来个最常用的,直接上代码: 1.父传值给子组件 父组件: <template> <div> & ...

  9. VUE父子组件传值问题

    一.父组件向子组件传递数据 组件实例的作用域是孤立的.这意味着不能(也不应该)在子组件的模板内直接引用父组件的数据.要让子组件使用父组件的数据,我们需要通过子组件的props选项. 1.静态props ...

  10. vue父子组件传值

    1.父组件向子组件传值 例如app.vue是父组件,v-header.vue是子组件,实现app向v-header传值父组件需要自定义自己的title值, 子组件v-header内容 <temp ...

随机推荐

  1. java语言体系的技术简介之JSP、Servlet、JDBC、JavaBean(Application)

    转自:https://zhangkunnan.iteye.com/blog/2040462 前言 Java语言 Java语言体系比较庞大,包括多个模块.从WEB项目应用角度讲有JSP.Servlet. ...

  2. 配置 NTP 时间服务器

    对于我们当前这种案例,主要目标是把 z01 这台服务器设置为时间服务器,剩下的 z02,z03 这两台机器同步 z01 的时间,我们需要这样做的原因是因为,整个集群架构中的时间,要保持一致. ** 检 ...

  3. Java Swing 托盘闪烁Demo实例

    桌面程序当中,托盘显示是一个常用的功能. C#的WinForm程序要实现托盘是挺轻松的,而Java Swing要实现这个功能虽然也不难, 但是由于Java Swing开发者或许没有C#多,所以看到很多 ...

  4. C#小代码

    1.创建随机ID: Id = Guid.NewGuid().ToString("N"); 2.创建随机时间: CreationTime = DateTime.Now: int st ...

  5. 新疆大学(新大)OJ xju 1009: 一带一路 prim求最短路径+O(n)素数筛选

    1009: 一带一路 时间限制: 1 Sec  内存限制: 128 MB 题目描述 一带一路是去去年习大大提出来的建设“新丝绸之路经济带”和“21世纪海上丝绸之路”的战略构想.其中就包括我们新疆乌鲁木 ...

  6. array_key_exists()

    array_key_exists()方法用于检查键名是否存在数组中. <?php $a=array("name"=>"XC90","tex ...

  7. How Javascript works (Javascript工作原理) (三) 内存管理及如何处理 4 类常见的内存泄漏问题

    个人总结: 1.两种垃圾回收机制: 1)引用标记算法:如果检测到一个对象没有被引用了,就清除它. ***这种算法不能处理循环引用的情况*** 2)标记—清除算法:从根(全局变量)开始向后代变量检测,任 ...

  8. (noip模拟十七)【BZOJ3930】[CQOI2015]选数-容斥水法

    Description 我们知道,从区间[L,H](L和H为整数)中选取N个整数,总共有(H-L+1)^N种方案.小z很好奇这样选出的数的最大公约数的规律,他决定对每种方案选出的N个整数都求一次最大公 ...

  9. ActiveMQ:JMS开源框架入门介绍

    介绍基本的JMS概念与开源的JMS框架ActiveMQ应用,内容涵盖一下几点: 基本的JMS概念 JMS的消息模式 介绍ActiveMQ 一个基于ActiveMQ的JMS例子程序 一:JMS基本概念 ...

  10. Linux学习之计算机基础理论

    一.描述计算机的组成及其功能. 计算机系统是由硬件系统(hardware)和软件系统(software system)两部分组成. 硬件系统: 从硬件基本结构上来讲,计算机是由运算器.控制器.存储器. ...