Vue中的父子传值问题
个人网站 https://iiter.cn 程序员导航站 开业啦,欢迎各位观众姥爷赏脸参观,如有意见或建议希望能够不吝赐教!
好久没更博了,感觉下班后的时间莫名其妙就没有了,有了,了。。。
趁着端午放假,更一篇博吧,也算是对已过半的6月一个交代。恩,已过大半~
主题是Vue中几种常见的传值方法。。。先写个父子传值吧
vue-cli构建项目目录,噜啦啦,这个就不用说了吧。
接着创建父子组件,父组件Father.vue,子组件Son.vue(随意起名,开心就好),然后在父组件中引入子组件,创建一个父组件的路由。车门已经焊死了,请继续往下看
1.父传子
Father.vue(用v-bind(简写 : ) 将父组件传的值绑定到子组件上)
<template>
<div>
我是爸爸:{{message}}
<hr>
<Son :toSonData="toSonData"></Son>
</div>
</template>
<script>
import Son from "./Son.vue";
export default {
data() {
return {
message : "儿子你好",
toSonData: "大嘴巴子"//给子组件的值
};
},
components: {
Son
}
};
</script>
<style lang='scss' scoped>
</style>
Son.vue(在子组件中用props方法接收父组件传来的值,两种方法,具体用哪种看个人喜好,推荐第二种)
<template>
<div>
我是儿子:{{message}}
<br>
爸爸给我的礼物:{{toSonData}}
</div>
</template>
<script>
export default {
// props:["toSonData"],//第一种方式
props:{//第二种方式
toSonData:{
type:String,
default:function(){
return ""
}
}
},
data () {
return {
message : "爸爸你好"
};
},
}
</script>
<style lang='scss' scoped>
</style>
效果图:
2.子传父
Son.vue(在子组件中创建一个按钮,定义一个点击事件,点击事件里用this.$emit方法触发一个自定义事件,并传递一个参数)
<template>
<div>
我是儿子:{{message}}
<br>
爸爸给我的礼物:{{toSonData}}
<br>
<button @click="toFatherData">给爸爸传值</button>
</div>
</template>
<script>
export default {
// props:["toSonData"],//第一种方式
props:{//第二种方式
toSonData:{
type:String,
default:function(){
return ""
}
}
},
data () {
return {
message : "爸爸你好"
};
},
methods:{
toFatherData(){
this.$emit("toFatherData","给爸爸的爱")
}
}
}
</script>
<style lang='scss' scoped>
</style>
Father.vue(在父组件中的子标签中监听该自定义事件并添加一个响应该事件的处理方法,将接收到的值赋给data中的sendSonMessage)
<template>
<div>
我是爸爸:{{message}}
<br>
儿子传来的值:{{sendSonMessage}}
<hr>
<Son :toSonData="toSonData" @toFatherData="sendSonData"></Son>
</div>
</template>
<script>
import Son from "./Son.vue";
export default {
data() {
return {
message : "儿子你好",
toSonData: "大嘴巴子",//给子组件的值
sendSonMessage: ""
};
},
components: {
Son
},
methods:{
sendSonData(data){
this.sendSonMessage=data;
}
}
};
</script>
<style lang='scss' scoped>
</style>
效果图:
这里有324.57GB的修仙资料。嘿嘿嘿你懂得。/手动狗头
扫二维码加为好友就完事了!安排~
Vue中的父子传值问题的更多相关文章
- vue中Prop父子传值方法
在用vue做项目的过程中感觉很好玩,特做下笔记... 父组件中: <template> <div> <fpdx-modal :zbArr="polygonArr ...
- 【Vue】Vue中的父子组件通讯以及使用sync同步父子组件数据
前言: 之前写过一篇文章<在不同场景下Vue组件间的数据交流>,但现在来看,其中关于“父子组件通信”的介绍仍有诸多缺漏或者不当之处, 正好这几天学习了关于用sync修饰符做父子组件数据双向 ...
- vue中的父子组件相互调用
vue中的父子组件相互调用: 1.vue子组件调用父组件方法:子组件:this.$emit('xx'); 父组件:定义yy方法,并在引用子组件时传参,如@xx="yy" 2.vue ...
- 小白都能看懂的vue中各种通信传值方式,附带详细代码
1.路由通信传值 路由通信是通过路由跳转用query把参数带过去,也是vue常用的通信手段. 例子: 创建并在路由注册一个组件Head <template> <div id=&quo ...
- Vue组件中的父子传值
<!DOCTYPE html> <html lang="en"> <head> <meta charset="UTF-8&quo ...
- Vue中组件间传值常用的几种方式
版本说明: vue-cli:3.0 一.父子组件间传值 1.props/$emit -父组件==>>子组件: 子组件中通过定义props接收父组件中通过v-bind绑定的数据 父组件代码 ...
- Vue学习(二)-Vue中组件间传值常用的几种方式
版本说明:vue-cli:3.0 主要分为两类: 1.父子组件间的传值 2.非父子组件间的传值 1.父子组件间传值 父组件向子组件传值 第一种方式: props 父组件嵌套的子组件中,使用v-bind ...
- vue中的组件传值
组件关系可以分为父子组件通信.兄弟组件通信.跨级组件通信. 父传子 - props 子传父 - $emit 跨级可以用bus 父子双向 v-model 父链(this.$parent this.$ch ...
- vue中v-model父子组件通信
有这样的需求,父组件绑定v-model,子组件输入更改父组件v-model绑定的数值.是怎么实现的呢? 实际上v-model 只是语法糖而已. <input v-model="inpu ...
随机推荐
- Altium 分形天线设计
Altium 分形天线设计 程序运行界面 Cantor三分集 Koch雪花 Sierpinski垫片 源代码: Iter_Num = 4 'diedai PI = 3.1415926 Call ...
- docker 服务器安装harbor
一.Harbor是什么? 二.环境搭建 2.1在linux centos搭建服务 2.2docker安装 yum安装 yum install docker 卸载 :pip uninstall dock ...
- Linux 磁盘管理篇,设备文件
IDE硬盘 /dev/hd[a-d] SCSI/SATA/USB硬盘 /dev/sd[a-p] U盘 /dev/sd[a-p] ...
- Java 方法 的使用
简单的说: 方法就是完成特定功能的代码块– 在很多语言里面都有函数的定义– 函数在Java中被称为方法 • 格式:– 修饰符 返回值类型 方法名(参数类型 参数名1, 参数类型参数名2…) {函数体; ...
- Array(数组)对象-->数组值的修改
1.修改数组值: 数组对象名[下标] = 新值: 举例:原数组如下: var arr = [1,2,3,4,5] 需求:将arr数组第二个元素的值改为10,代码如下: arr[1] = 10; con ...
- Altium Designer 3D
- 基于ffmpeg不同编码方式转码后的psnr对比
一.测试说明: 源文件:1080psrc.mp4 时长:900秒 源文件信息:Video: h264 (High) (avc1 / 0x31637661), yuv420p, 1920x1080 [S ...
- X - Ehab and Path-etic MEXs CodeForces - 1325C
MMP,差一点就做对了. 题目大意:给你一个树,对这个树的边进行编号,编号要求从0到n-1,不可重复,要求MEX(U,V)尽可能的小, MEX(x,y)的定义:从x到y的简单路径上,没有出现的最小编号 ...
- 最长上升子序列 HDU 1025 Constructing Roads In JGShining's Kingdom
最长上升子序列o(nlongn)写法 dp[]=a[]; ; ;i<=n;i++){ if(a[i]>dp[len]) dp[++len]=a[i]; ,dp++len,a[i])=a[i ...
- php+mysql数据库联合查询 left join 右侧数据重复问题
情况:多表联合查询(三表及以上联合查询) 分析: A left join B left join C left join D 假如: 表B.C.D都与表A关联查询 A left join B 4条数据 ...