先说明下父组件Login,子组件signCon

子拿到父数据可以通过,在子组件里面设置props:['name']的方法拿到。

首先在父组件中定义数据了:

data(){
Englishname:'lishishi'
}
<signCon :name="Englishname"/>

子组件中:

props:['name']

在子组件中的html中就可以使用了{{name}}

子传父,想一想肯定是父组件想用子组件中的数据了

子组件中的html中有一个<button @click="go"><button/>

data(){
return{

sex:['男',‘女’]

}
}

methiods:{
  go(){

    this.$emit('thg',this.sex)
  }
}

在父组件中也就是Login里面找到子组件也就是<signCon @thg="shows"/>

methods:{

shows(e){

this.data=e

}

}

vue中子传父,父传子的具体用法的更多相关文章

  1. Vue中子组件调用父组件的方法

    Vue中子组件调用父组件的方法 相关Html: <!DOCTYPE html> <html lang="en"> <head> <meta ...

  2. vue中子组件调用父组件里面的数据和方法 父组件调用子组件的数据和方法

    1.子组件直接调用父组件的数据和方法 在父组件father,vue <template> <div> <!-- 父组件里面的数据 --> <p>父组件里 ...

  3. vue中子组件向父组件传值

    1.子组件$emit()触发,父组件$on()监听 子组件:<template> <div class="hello"> <button v-on:c ...

  4. Vue 编程之路(三)—— Vue 中子组件在父组件的 v-for 循环里,父组件如何调取子组件的事件

    (标题的解决方案在第二部分) 最近公司的一个项目中使用 Vue 2.0 + element UI 实现一个后台管理系统的前端部分,属于商城类型. 一.前期思路: 其中在“所有订单”页面,UI 给的设计 ...

  5. vue.js(19)--vue中子组件调用父组件的方法

    子组件是不能直接使用父组件中的方法的,需要进行事件绑定(v-on:自定义方法名="父组件方法名"),然后在子组件中再定义一个方法,使用this.$emit('自定义方法名')语句完 ...

  6. vue中子组件触发父组件的方法

    网上找了几种方法,下面这两种最实用,最明了 方法一:父组件方法返回是字符串或数组时用这种方法 子组件: <template> <button @click="submit& ...

  7. vue中子组件更新父组件

    当在子组件里更改了某些信息且关闭子组件后,需要父组件更新修改后的内容,该如何操作 1.$emit触发 父组件 @add="add(val)" 子组件 this.$emit('add ...

  8. Vue 子组件向父组件传参

    直接上代码 <body> <div id="counter-event-example"> <p>{{ total }}</p> & ...

  9. vue 父组件给子组件传值 Vue父组件给子组件传方法 Vue父组件把整个实例传给子组件

    Home.vue <template> <!-- 所有的内容要被根节点包含起来 --> <div id="home"> <v-header ...

随机推荐

  1. AOP - C# Fody中的方法和属性拦截

    很久很久以前用过postsharp来做AOP, 大家知道的,现在那东东需要付费,于是尝试了一下Fody,但是发现Fody跟新太快了,所以大家在安装fody的时候尽力安装老的版本:packages.co ...

  2. 【Java】maven多项目资源共享

    方案一: <resources> <resource> <!-- <directory>${project.parent.relativePath}/../. ...

  3. Navicat for MySQL 64位破解版

    注册码:NAVH-WK6A-DMVK-DKW3 百度网盘链接(为安装包,直接运行EXE文件即可):http://pan.baidu.com/s/1o7OwjFG

  4. ionic中android的返回键

    ionic中android的返回键 在ionic框架中已经注册了几个返回事件,分别是 view sideMenu modal actionSheet popup loading 他们的优先级分别是 v ...

  5. rpm 打包的时候 不进行strip

    http://blog.aka-cool.net/blog/2016/06/01/how-to-disable-strip-in-rpm-build/ https://www.ichenfu.com/ ...

  6. typescript 与 js 开发 react 的区别

    一.从定义文件格式方面说1.传统的开发模式可以定义js文件或者jsx文件2.利用ts开发定义的文件格式tsx二.定义state的状态来说1.传统的方式直接在构造函数中使用 constructor(){ ...

  7. 单片机成长之路(51基础篇) - 012 MCS-51单片机控制详解–TMOD T2MOD

    TMOD:工作方式控制寄存器 寄存器地址89H,不可位寻址. 位序 B7 B6 B5 B4 B3 B2 B1 B0 位符号 GATE C/T M1 M0 GATE C/T M1 M0 GATE——门控 ...

  8. 对于 url encode decode js 和 c# 有差异

    在js对一个值进行解码使用:decodeURIComponent,编码使用:encodeURIComponent

  9. spring 中单例 bean 初始化之后和销毁之前执行指定动作 postconstruct 和 preDestroy

    1 生命周期方法, 在指定bean 创建完成后执行初始化动作或销毁之前做一些善后动作.有 3 种方法 1)实现接口 InitializingBean 然后实现 afterPropertiesSet 方 ...

  10. [svc]证书学习索引

    数字证书基础知识 对称加密/非对称加密细枝末节 openssl对称非对称加密实战 使用OpenSSL实现CA证书的搭建过程 通过openssl生成证书 HTTPS证书生成原理和部署细节 证书各个字段的 ...