Vue父子组件之间通信
1、父 -> 子。通过props
//father.vue
<template>
<div id="father">
<div><label>姓名</label><input type="text" v-model="name"/></div>
</div>
</template> <script>
import child from './child'
export default {
data() {
return {
name: ''
}
},
components: { child }
}
</script> <style scoped> </style>
//child.vue
<template>
<div id="child">
<div>父组件传过来的值:{{msg}}</div>
</div>
</template> <script>
export default {
props: ['msg']
}
</script> <style scoped> </style>
2、子 -> 父 通过emit事件触发父组件上的方法
//father.vue
<template>
<div id="father">
<div><label>姓名</label><input type="text" v-model="name"/></div>
<div style="margin-top:20px">
<child :msg="name" @msgFt="fun"></child>
</div>
</div>
</template> <script>
import child from './child'
export default {
data() {
return {
name: ''
}
},
methods: {
fun(val) {
console.log(val)
this.name = val
}
},
components: { child }
}
</script> <style scoped> </style>
//child.vue
<template>
<div id="child">
<div>父组件传过来的值:{{msg}}</div>
<input type="text" v-model="name" />
<button type="button" @click="handle">传给父组件</button>
</div>
</template> <script>
export default {
props: ['msg'],
data() {
return {
name: ''
}
},
methods: {
handle() {
this.$emit('msgFt',this.name)
}
}
}
</script> <style scoped> </style>
Vue父子组件之间通信的更多相关文章
- VUE 父子组件之间通信传值 props和 $emit
1.父组件传值给子组件 $props,子组件传值给父组件 $emit 父组件 <div id="app" > <tr ...
- 【转】vue父子组件之间的通信
vue父子组件之间的通信 在vue组件通信中其中最常见通信方式就是父子组件之中的通性,而父子组件的设定方式在不同情况下又各有不同.最常见的就是父组件为控制组件子组件为视图组件.父组件传递数据给子组件使 ...
- 【Vue课堂】Vue.js 父子组件之间通信的十种方式
这篇文章介绍了Vue.js 父子组件之间通信的十种方式,不管是初学者还是已经在用 Vue 的开发者都会有所收获.无可否认,现在无论大厂还是小厂都已经用上了 Vue.js 框架,简单易上手不说,教程详尽 ...
- Vue.js 父子组件之间通信的方式
Vue 父子组件之间的同学有一下几种方式: 1. props 2. $emit -- 组件封装用的比较多 3. .sync -- 语法糖 4. $attrs 和 $listeners -- 组件封装用 ...
- 浅谈vue父子组件之间的传值
前言:本章主要说下父子组件的传值,为商品列表组件之间的传值做一个基础预热.Github:https://github.com/Ewall1106/mall(请选择分支chapter23) 1.父组件向 ...
- vue:父子组件间通信,父组件调用子组件方法进行校验子组件的表单
参考: ElementUI多个子组件表单的校验管理:https://www.jianshu.com/p/541d8b18cf95 Vue 子组件调用父组件方法总结:https://juejin.im/ ...
- vue父子组件之间传值
vue父子组件进行传值 vue中的父子组件,什么是父组件什么是子组件呢?就跟html标签一样,谁包裹着谁谁就是父组件,被包裹的元素就是子组件. 父组件向子组件传值 下面用的script引入的方式,那种 ...
- Vue父子组件之间的相互通信
组件是Vue知识体系中最重要的一部分之一,父子组件由于作用域的不同,无法直接对对方的数据进行操作.它们之间的数据传递都是通过中间介质进行的,父组件给子组件传值是通过props属性,而子组件给父组件传值 ...
- vue2.0父子组件之间通信
父组件是通过props属性给子组件通信的来看下代码: 父组件: <parent> <child :child-com="content"></chil ...
随机推荐
- 14.会场安排问题(L4)
时间限制:3000 ms | 内存限制:65535 KB 难度:4 描述 学校的小礼堂每天都会有许多活动,有时间这些活动的计划时间会发生冲突,需要选择出一些活动进行举办.小刘的工作就是安排学校 ...
- Numpy - Pandas - Matplot 功能与函数名 速查
用Python做数据分析,涉及到的函数实在是太多了,容易忘记,去网上查中文基本上差不到,英文有时候描述不清楚问题. 这里搞个针对个人习惯的函数汇总速查手册,下次需要用一个什么功能,就在这里面查到对应的 ...
- bzoj千题计划256:bzoj2194: 快速傅立叶之二
http://www.lydsy.com/JudgeOnline/problem.php?id=2194 相乘两项的下标 的 差相同 那么把某一个反过来就是卷积形式 fft优化 #include< ...
- C#的Struct
- Lua程序设计(一)面向对象概念介绍
完整代码 local mt = {} mt.__add = function(t1,t2) print("两个Table 相加的时候会调用我") end local t1 = {} ...
- 总有一些实用javascript的元素被人遗忘在角落-slice
slice() 方法可从已有的数组中返回选定的元素. 好吧,我承认我竟然把它忘了! 这次我在回顾一下它 语法 arrayObject.slice(start,end) 数组.slice(起始,结束) ...
- Firefox滚动残影(转)
Firefox滚动残影 Firefox滚动残影这文章放在草稿箱有一阵子了,之前的3系列都有这BUG,当正想发表这文章的时候,和我沟通刚刚升级的FF4已修复此BUG,所以搁置一阵在考虑到这文章还有没 ...
- Vue.js几个简单用法
<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/ ...
- Oracle PLSql配置
1.安装Oracle客户端或者服务端 2.配置环境变量 <1>.一般如果安装了Oracle客户端或者服务端的话,在环境变种的Path中有Oracle的安装路径(计算机-属性-高级系统设置- ...
- State Estimation for Robotics (Tim Barfoot) exercises Answers
Here are some exercises answers for State Estimation for Robotics, which I did in June, 2017. The bo ...