基于Vue中的父子传值问题解决


Posted in Javascript onJuly 27, 2020

主题是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>

效果图:

基于Vue中的父子传值问题解决

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>

效果图:

基于Vue中的父子传值问题解决

补充知识:在vue中的for循环,我经常用这两种方法

1、

for(let item of response.data.result) {

用item操作每一条数据。
}

item:定义的每一条的变量

response.data.result:要循环的数组

2、

response.data.result.forEach((item, index) => {

用item操作每一条数据。
})

response.data.result:要循环的数组

index:索引

以上这篇基于Vue中的父子传值问题解决就是小编分享给大家的全部内容了,希望能给大家一个参考,也希望大家多多支持三水点靠木。

Javascript 相关文章推荐
SUN的《AJAX与J2EE》全文译了
Feb 23 Javascript
javascript时区函数介绍
Sep 14 Javascript
javascript测试题练习代码
Oct 10 Javascript
通过js简单实现将一个文本内容转译成加密文本
Oct 22 Javascript
javascipt:filter过滤介绍及使用
Sep 10 Javascript
node.js中的buffer.Buffer.isEncoding方法使用说明
Dec 14 Javascript
javascript事件冒泡实例分析
May 13 Javascript
纯javascript制作日历控件
Jul 17 Javascript
Javascript小技能总结(推荐)
Jun 02 Javascript
不得不看之JavaScript构造函数及new运算符
Aug 21 Javascript
详解package.json版本号规则
Aug 01 Javascript
layer.open 获取不到表单信息的解决方法
Sep 26 Javascript
element日历calendar组件上月、今天、下月、日历块点击事件及模板源码
Jul 27 #Javascript
JS图片懒加载技术实现过程解析
Jul 27 #Javascript
Element Notification通知的实现示例
Jul 27 #Javascript
Vue中watch、computed、updated三者的区别及用法
Jul 27 #Javascript
Element Backtop回到顶部的具体使用
Jul 27 #Javascript
解决vue中的无限循环问题
Jul 27 #Javascript
Element MessageBox弹框的具体使用
Jul 27 #Javascript
You might like
VOLVO车载收音机
2021/03/02 无线电
ajax 的post方法实例(带循环)
2011/07/04 PHP
yii2 上传图片的示例代码
2018/11/02 PHP
syntaxhighlighter 使用方法
2007/07/02 Javascript
ASP.NET jQuery 实例14 在ASP.NET form中校验时间范围
2012/02/03 Javascript
js转义字符介绍
2013/11/05 Javascript
JavaScript设置表单上传时文件个数的方法
2015/08/11 Javascript
js倒计时抢购实例
2015/12/20 Javascript
JavaScript+html5 canvas绘制的小人效果
2016/01/27 Javascript
jQuery获取同级元素的简单代码
2016/07/09 Javascript
利用Query+bootstrap和js两种方式实现日期选择器
2017/01/10 Javascript
JavaScript实现瀑布流以及加载效果
2017/02/11 Javascript
JavaScript实现无穷滚动加载数据
2017/05/06 Javascript
JS中去掉array中重复元素的方法
2017/05/26 Javascript
Vue项目查看当前使用的elementUI版本的方法
2018/09/27 Javascript
新年快乐! javascript实现超级炫酷的3D烟花特效
2019/01/30 Javascript
使用Vue-cli3.0创建的项目 如何发布npm包
2019/10/10 Javascript
Vue环境搭建+VSCode+Win10的详细教程
2020/08/19 Javascript
[25:59]Newbee vs TNC 2018国际邀请赛小组赛BO2 第二场 8.16
2018/08/17 DOTA
Python爬虫模拟登录带验证码网站
2016/01/22 Python
详解Django的model查询操作与查询性能优化
2018/10/16 Python
Python中一般处理中文的几种方法
2019/03/06 Python
24式加速你的Python(小结)
2019/06/13 Python
python实现树的深度优先遍历与广度优先遍历详解
2019/10/26 Python
Python爬虫库BeautifulSoup获取对象(标签)名,属性,内容,注释
2020/01/25 Python
python如何进行矩阵运算
2020/06/05 Python
CSS3下的渐变文字效果实现示例
2018/03/02 HTML / CSS
幼师专业毕业生自荐信
2013/09/29 职场文书
儿科护士自我鉴定
2013/10/14 职场文书
结婚喜宴家长答谢词
2014/01/15 职场文书
趣味活动策划方案
2014/02/08 职场文书
绩效工资实施方案
2014/03/15 职场文书
咖啡店创业计划书范文
2014/09/15 职场文书
2014大四本科生自我鉴定总结
2014/10/04 职场文书
2014年街道办事处工作总结
2014/12/11 职场文书
tomcat的catalina.out日志按自定义时间格式进行分割的操作方法
2022/04/02 Servers