vue 组件之间通信
父传子
**父组件代码**
<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 { }
},
}
</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 组件之间通信的更多相关文章
- 前端面试 vue 部分 (5)——VUE组件之间通信的方式有哪些
VUE组件之间通信的方式有哪些(SSS) 常见使用场景可以分为三类: 父子通信: null 父向子传递数据是通过 props ,子向父是通过 $emit / $on $emit / $bus Vuex ...
- Vue 组件之间通信 All in One
Vue 组件之间通信 All in One 组件间通信 1. 父子组件之间通信 https://stackblitz.com/edit/vue-parent-child-commutation?fil ...
- vue组件之间通信传值
原文链接:https://blog.csdn.net/lander_xiong/article/details/79018737 我认为这位博主的这篇文章写的非常详细,通俗易懂, 我们这次的vue项目 ...
- vue组件之间通信总结(超详细)
组件通信在我们平时开发过程中,特别是在vue和在react中,有着举足轻重的地位.本篇将总结在vue中,组件之间通信的几种方式: props.$emit $parent.$children $attr ...
- Vue组件之间通信的三种方式
最近在看梁颠编著的<Vue.js实战>一书,感觉颇有收获,特此记录一些比价实用的技巧. 组件是MVVM框架的核心设计思想,将各功能点组件化更利于我们在项目中复用,这类似于我们服务端面向对象 ...
- vue组件之间通信的8种方式
对于vue来说,组件之间的消息传递是非常重要的,下面是我对组件之间消息传递的常用方式的总结. props和$emit(常用) $attrs和$listeners 中央事件总线(非父子组件间通信) v- ...
- Vue组件之间通信
vue组件传值有以下几种情况: 父组件向子组件传值.子组件向父组件传值.兄弟组件之间传值等 一.父组件向子组件传值: 传值方式: props <father> // 动态传递值 <s ...
- vue组件之间通信总结---点赞
总结:父组件-->子组件 ①通过属性 步骤1: <son myName="michael" myPhone='123'></son> <son ...
- 【Vue课堂】Vue.js 父子组件之间通信的十种方式
这篇文章介绍了Vue.js 父子组件之间通信的十种方式,不管是初学者还是已经在用 Vue 的开发者都会有所收获.无可否认,现在无论大厂还是小厂都已经用上了 Vue.js 框架,简单易上手不说,教程详尽 ...
随机推荐
- SuperMemo method
原文:https://www.supermemo.com/en/archives1990-2015/english/ol/sm2 别人的研究:http://wdxtub.lofter.com/post ...
- import的本质
import本质? 1定义: 模块:用来从逻辑上组织python代码(变量,函数,类,逻辑:实现一个功能,本质上是一个.py结尾的python文件)(文件:text.py 对应的模块名:text) 包 ...
- html和css的一些常用标签使用
HTML(HyperText Mark-up Language)超文本标签语言 <!DOCTYPE html> <!--声明这是一个html文档--> <html> ...
- c线程使用锁控制并发
// // Created by gxf on 2019/12/16. // #include <stdlib.h> #include <stdio.h> #include & ...
- split()函数实现
#split函数实现: ss='** *axx* *bv** *ctt** **dff***' result=[] def split_1(ss,a,times=len(ss)): i=0 n=0 w ...
- Redis单实例数据迁移到集群
环境说明 单机redis redis集群 192.168.41.101:7000 master 192.168.41.101:7001 master 192.168.41.102:7000 maste ...
- Qt中使用匿名函数lambda表达式
一.为什么要使用匿名函数lamdba 首先,lambda表达式可以使代码变得简单,C++中,一个lambda表达式表示一个可调用的代码单元.如代码: #include <QCoreApplica ...
- JS中constructor,prototype
First: this this定义: this就是函数赖以执行的对象. 分析这句话: 1. this是对象. 2. this依赖函数执行的上下文环境. 3. this存在函数中. 直接看例子: al ...
- JQuery实践--Ajax
Ajax概览无需刷新用户页面而发起服务器请求的技术.创建一个XHR实例: var xhr if(window.XMLHttpRequest) { xhr = new XML ...
- P4213【模板】杜教筛(Sum)
思路:杜教筛 提交:\(2\)次 错因:\(\varphi(i)\)的前缀和用\(int\)存的 题解: 对于一类筛积性函数前缀和的问题,杜教筛可以以低于线性的时间复杂度来解决问题. 先要构造\(h= ...