父传子

**父组件代码**
<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. spring-boot-actuator 常用配置

    management: endpoints: web: base-path: "/" exposure: include: "*" endpoint: heal ...

  2. Orangepi 修改 Debian国内源

    1.导出sources.list 1   cat /etc/apt/sources.list >  sources.list  2.修改sources.list内容为如下: 1234   deb ...

  3. YOLO---近段时间的练习目标

    YOLO---近段时间的练习目标 yolo(darknet)官方主页:https://pjreddie.com/darknet/yolo/   和在学校时用的不太一样了,有更新了- 还有一个常用版本: ...

  4. Ubuntu系统---开机总会显示错误报告处理

    Ubuntu系统---开机总会显示错误报告处理 使用ubuntu16.04,开机总会显示错误报告,略烦人,查找方法关闭.一.临时关闭sudo service apport stop(重启后失效) 二. ...

  5. java之语言

    1.集合类 主要掌握如何实现. ArrayList实现原理要点概括 ArrayList是List接口的可变数组非同步实现,并允许包括null在内的所有元素.底层使用数组实现该集合是可变长度数组,数组扩 ...

  6. Java基础 - Map接口的实现类 : HashedMap / LinkedHashMap /TreeMap 的构造/修改/遍历/ 集合视图方法/双向迭代输出

    Map笔记: import java.util.*; /**一:Collection接口的 * Map接口: HashMap(主要实现类) : HashedMap / LinkedHashMap /T ...

  7. halcon基础数据类型详解

    #if defined(__CHAR_UNSIGNED__) || defined(__sgi) #define INT1 signed char /* integer, signed 1 Byte ...

  8. 从list引用调用arraylist和linkedlist对象的方法了解多态

    一.前言 今天和朋友在写代码时突然发现List<object>  list=new ArrayList<object>()中,前面是通过List引用来调用其子类ArrayLis ...

  9. git 之 .gitignore文件

    所有空行或者以注释符号 # 开头的行都会被 Git 忽略 匹配模式最后跟反斜杠(/)说明要忽略的是目录 要忽略指定模式以外的文件或目录,可以在模式前加上惊叹号(!)取反 *.a # 忽略所有 .a 结 ...

  10. Codeforces Round #571 (Div. 2)

    A. Vus the Cossack and a Contest 签. #include <bits/stdc++.h> using namespace std; int main() { ...