父传子

**父组件代码**
<template>
<header-box :title-txt="showTitleTxt"></header-box>
</template>
<script>
import Header from './header'
export default {
name: 'index',
components: {
'header-box': Header
},
data () {
return {
showTitleTxt: '首页'
}
}
}
</script>

  

**子组件代码**
<template>
<header>
{{thisTitleTxt}}
</header>
</template>
<script>
export default {
name: 'header-box',
props: {
titleTxt: String
},
data () {
return {
thisTitleTxt: this.titleTxt
}
}
}
</script>

子传父1

**子组件代码**
<template>
<header>
<button @click='anniu'></button>
</header>
</template>
<script>
export default {
name: 'header-box',
props: {
titleTxt: String
},
data () {
return { }
},
                   methods: {
                          anniu(){
                                 this.titleTxt('子组件传来的值')
                          },
                   },
    }
</script>

  

**父组件代码**
<template>
<header-box :title-txt="showTitleTxt"></header-box>
</template>
<script>
import Header from './header'
export default {
name: 'index',
components: {
'header-box': Header
},
data () {
return {
showTitleTxt: '首页'
}
},
methods:{
showTitleTxt(a){
console.log(a) //子组件传来的值
}, }
}
</script>

子传父2

**子组件代码**
<template>
<button @click="incrementCounter">{{counter}}</button>
</template>
<script>
export default {
name: 'button-counter',
data () {
return {
counter: 0
}
},
metheds: {
incrementCounter () {
this.$emit('increment','子组件传来的值')
this.counter++
}
}
}
</script>
*通过$on,$emit*
**父组件代码**
<template>
<div id="counter-event-example">
<p>{{ total }}</p>
<button-counter v-on:increment="incrementTotal"></button-counter>
</div>
</template>
<script>
import ButtonCounter from './buttonCounter'
export default {
name: 'index',
components: {
'button-conuter': ButtonCounter
},
data () {
return {
total: 0
}
},
methods: {
incrementTotal (a) {
console.log(a) //子组件传来的值
this.total++
}
}
}
</script>

  

vue 组件之间通信的更多相关文章

  1. 前端面试 vue 部分 (5)——VUE组件之间通信的方式有哪些

    VUE组件之间通信的方式有哪些(SSS) 常见使用场景可以分为三类: 父子通信: null 父向子传递数据是通过 props ,子向父是通过 $emit / $on $emit / $bus Vuex ...

  2. Vue 组件之间通信 All in One

    Vue 组件之间通信 All in One 组件间通信 1. 父子组件之间通信 https://stackblitz.com/edit/vue-parent-child-commutation?fil ...

  3. vue组件之间通信传值

    原文链接:https://blog.csdn.net/lander_xiong/article/details/79018737 我认为这位博主的这篇文章写的非常详细,通俗易懂, 我们这次的vue项目 ...

  4. vue组件之间通信总结(超详细)

    组件通信在我们平时开发过程中,特别是在vue和在react中,有着举足轻重的地位.本篇将总结在vue中,组件之间通信的几种方式: props.$emit $parent.$children $attr ...

  5. Vue组件之间通信的三种方式

    最近在看梁颠编著的<Vue.js实战>一书,感觉颇有收获,特此记录一些比价实用的技巧. 组件是MVVM框架的核心设计思想,将各功能点组件化更利于我们在项目中复用,这类似于我们服务端面向对象 ...

  6. vue组件之间通信的8种方式

    对于vue来说,组件之间的消息传递是非常重要的,下面是我对组件之间消息传递的常用方式的总结. props和$emit(常用) $attrs和$listeners 中央事件总线(非父子组件间通信) v- ...

  7. Vue组件之间通信

    vue组件传值有以下几种情况: 父组件向子组件传值.子组件向父组件传值.兄弟组件之间传值等 一.父组件向子组件传值: 传值方式: props <father> // 动态传递值 <s ...

  8. vue组件之间通信总结---点赞

    总结:父组件-->子组件 ①通过属性 步骤1: <son myName="michael" myPhone='123'></son> <son ...

  9. 【Vue课堂】Vue.js 父子组件之间通信的十种方式

    这篇文章介绍了Vue.js 父子组件之间通信的十种方式,不管是初学者还是已经在用 Vue 的开发者都会有所收获.无可否认,现在无论大厂还是小厂都已经用上了 Vue.js 框架,简单易上手不说,教程详尽 ...

随机推荐

  1. SuperMemo method

    原文:https://www.supermemo.com/en/archives1990-2015/english/ol/sm2 别人的研究:http://wdxtub.lofter.com/post ...

  2. import的本质

    import本质? 1定义: 模块:用来从逻辑上组织python代码(变量,函数,类,逻辑:实现一个功能,本质上是一个.py结尾的python文件)(文件:text.py 对应的模块名:text) 包 ...

  3. html和css的一些常用标签使用

    HTML(HyperText Mark-up Language)超文本标签语言 <!DOCTYPE html> <!--声明这是一个html文档--> <html> ...

  4. c线程使用锁控制并发

    // // Created by gxf on 2019/12/16. // #include <stdlib.h> #include <stdio.h> #include & ...

  5. split()函数实现

    #split函数实现: ss='** *axx* *bv** *ctt** **dff***' result=[] def split_1(ss,a,times=len(ss)): i=0 n=0 w ...

  6. Redis单实例数据迁移到集群

    环境说明 单机redis redis集群 192.168.41.101:7000 master 192.168.41.101:7001 master 192.168.41.102:7000 maste ...

  7. Qt中使用匿名函数lambda表达式

    一.为什么要使用匿名函数lamdba 首先,lambda表达式可以使代码变得简单,C++中,一个lambda表达式表示一个可调用的代码单元.如代码: #include <QCoreApplica ...

  8. JS中constructor,prototype

    First: this this定义: this就是函数赖以执行的对象. 分析这句话: 1. this是对象. 2. this依赖函数执行的上下文环境. 3. this存在函数中. 直接看例子: al ...

  9. JQuery实践--Ajax

    Ajax概览无需刷新用户页面而发起服务器请求的技术.创建一个XHR实例:    var xhr    if(window.XMLHttpRequest) {         xhr = new XML ...

  10. P4213【模板】杜教筛(Sum)

    思路:杜教筛 提交:\(2\)次 错因:\(\varphi(i)\)的前缀和用\(int\)存的 题解: 对于一类筛积性函数前缀和的问题,杜教筛可以以低于线性的时间复杂度来解决问题. 先要构造\(h= ...