vue组件通信,点击传值,动态传值(父传子,子传父)
转载:https://blog.csdn.net/xr510002594/article/details/83304141
一、父组件传子组件,核心--props
在这里触发 handleClick 点击事件,额外声明一个clickData,点击按钮将 inpMessage 的值赋给 clickData ,再传给子组件
父组件index.vue
<template>
<div>
<input type="text" v-model="inpMessage">
<button @click="handleClick">点击传给子组件</button>
<children :message="clickData" /> //message为子组件props接收的值,clickData为父组件要传的值
</div>
</template>
<script>
import children from './page/children'
export default {
name: "index",
components:{
children
},
data(){
return{
inpMessage:'',
clickData:''
}
},
methods:{
handleClick(){
//赋值
this.clickData = this.inpMessage
},
}
}
</script>
子组件代码:watch监听法
<template>
<div>
<input type="text" v-model="childrenMessage">
<!--<button @click="childClick">传值给父组件</button>-->
</div>
</template>
<script>
export default {
name: "children",
props:{
message:String
},
data(){
return{
childrenMessage:''
}
},
created(){
this.childrenMessage=this.message
},
//这里用watch方法来监听父组件传过来的值,来实现实时更新
watch:{
message(val){ //message即为父组件的值,val参数为值
this.childrenMessage = val //将父组件的值赋给childrenMessage 子组件的值
}
}
}
</script>
二、子组件传父组件,核心--$emit,这里附上完整父子传值的代码,vue是不允许子组件向父组件传值去改变父组件的值的,但是我们可以通过自定义事件的形式去改变值,例如点击事件,再通过$emit来传递,代码注释中有介绍。
父组件代码如下:
<template>
<div>
<input type="text" v-model="inpMessage">
<button @click="handleClick">点击传给子组件</button>
//@messageData为子组件声明传递过来的值,函数,getData为函数,val参数是传递过来的值
<children :message="clickData" @messageData="getData"/>
</div>
</template>
<script>
import children from './page/children'
export default {
name: "index",
components:{
children
},
data(){
return{
inpMessage:'',
clickData:''
}
},
methods:{
handleClick(){
this.clickData = this.inpMessage
},
//接收子组件传递的值,val参数是传递过来的值 ,给inpMessage 赋值,子组件改变父组件的值
getData(val){
this.inpMessage = val
console.log(val)
}
}
}
</script>
子组件代码如下:
<template>
<div>
<input type="text" v-model="childrenMessage">
<button @click="childClick">传值给父组件</button>
</div>
</template>
<script>
export default {
name: "children",
props:{
message:String
},
data(){
return{
childrenMessage:''
}
},
created(){
this.childrenMessage=this.message
},
methods:{
//点击传值给父组件,通过$emit传递,第一个参数messageData相当于传播的媒介,this.childrenMessage为需要传递的值,后面也可以传递多个参数
childClick(){
this.$emit('messageData',this.childrenMessage)
console.log(this.childrenMessage)
}
},
watch:{
message(val){
this.childrenMessage = val
}
}
}
</script>
vue组件通信,点击传值,动态传值(父传子,子传父)的更多相关文章
- Vue组件通信(传值)
先介绍一下什么是组件把: 创建组件的两种方式: 全局组件 // 组件就是vue的一个拓展实例 let component=Vue.extend({ data(){ return{ //与vue实例中的 ...
- Vue组件通信之非父子组件传值
前言: 如果想要了解非父子关系的组件传值,最好是在了解父传子和子传父的基础上在来了解非父子传值可能会有更透彻的思路. 因为非父子传值是通过定义事件总线来代理实现父传子+子传父从而实现的传值方式. 这是 ...
- 【Vue组件通信】props、$ref、$emit,组件传值
1.什么是组件通信 组件间如何通信,也就成为了vue中重点知识,组件通信,涉及到组件之间数据的传递.类似NET POST/GET参数传递. Vue基本的三种传递方式** (props.\(ref.\) ...
- vue 组件通信传值
父子组件通信: 子组件 <template> <div> <h3 @click="alerrt"> 我是子组件一</h3> < ...
- vue组件通信传值——Vuex
一.Vuex介绍 Vuex 是一个专为 Vue.js 应用程序开发的状态管理模式.它采用集中式存储管理应用的所有组件的状态,并以相应的规则保证状态以一种可预测的方式发生变化. Vuex 也集成到 Vu ...
- Vue 组件通信的多种方式(props、$ref、$emit、$attr、 $listeners)
prop和$ref之间的区别: prop 着重于数据的传递,它并不能调用子组件里的属性和方法.像创建文章组件时,自定义标题和内容这样的使用场景,最适合使用prop. $ref 着重于索引,主要用来调用 ...
- vue组件通信的几种方式
最近用vue开发项目,记录一下vue组件间通信几种方式 第一种,父子组件通信 一.父组件向子组件传值 1.创建子组件,在src/components/文件夹下新建一个Child.vue 2.Child ...
- vue组件通信全面总结
写在前面 组件间的通信是是实际开发中非常常用的一环,如何使用对项目整体设计.开发.规范都有很实际的的作用,我在项目开发中对此深有体会,总结下vue组件间通信的几种方式,讨论下各自的使用场景 文章对相关 ...
- vue组件通信新姿势
在vue项目实际开发中我们经常会使用props和emit来进行子父组件的传值通信,父组件向子组件传递数据是通过prop传递的, 子组件传递数据给父组件是通过$emit触发事件来做到的.例如: Vue. ...
随机推荐
- Find the Clones Trie Tree
Time Limit: 5000MS Memory Limit: 65536K Total Submissions: 8306 Accepted: 3130 Description Doubl ...
- vim 插件配置博客记录
本来打算自己写下各种经常使用vim的插件安装方法, 可是搜索了下, 发现别人都写过了, 在写一遍也没有意思, 特此记录. Vim 经常使用命令 http://blog.csdn.net/hittata ...
- 分布式设计《初尝memcached》
之前听说过高性能的分布式缓存开源工具,但一直没有真正接触过,如今接触的产品中实用到过分布式缓存.所以决定一探到底.memcached是一个优秀的开源的分布式缓存工具.也是眼下比較火热的分布 ...
- 2016.04.03,英语,《Vocabulary Builder》Unit 09
her/hes: from the Latin verb haerere, means 'to stick' or 'to get stuck'. adhesive means 'sticking' ...
- Android代码宏控制方案 【转】
本文转载自:http://blog.sina.com.cn/s/blog_769500f001017ro6.html 目前107分支上,在各项目projectConfig.mk中已添加项目宏以及客户宏 ...
- bzoj1081: [SCOI2005]超级格雷码(dfs)
1081: [SCOI2005]超级格雷码 题目:传送门 题解: 又是一道水题... 因为之前做过所以知道规律: 如n=2 B=3: 00 10 20 21 11 01 02 12 22 ...
- DNS隧道工具使用 不过其网络传输速度限制较大
DNS隧道工具使用 http://www.freebuf.com/sectool/112076.html http://netsec.ccert.edu.cn/zhengming/2011/11/01 ...
- 利用python开发的flappy bird 游戏
python 中 pygame模块能让我们很方便的编写游戏,16年我用python 仿制了flappy bird 游戏,下面是游戏的完整代码以及素材,分享给大家. 第一个python文件,flappy ...
- 乐字节-Java8核心特性实战-接口默认方法
JAVA8已经发布很久,是自java5(2004年发布)之后Oracle发布的最重要的一个版本.其中包括语言.编译器.库.工具和JVM等诸多方面的新特性,对于国内外互联网公司来说,Java8是以后技术 ...
- Irrlicht 1.8.4 + Win7 + VC2015 + x64 +OpenGL编译
1. 下载irrlicht1.8.4 https://nchc.dl.sourceforge.net/project/irrlicht/Irrlicht%20SDK/1.8/1.8.4/irrlich ...