基于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 相关文章推荐
JavaScript 直接操作本地文件的实现代码
Dec 01 Javascript
前后台交互过程中json格式如何解析以及如何生成
Dec 26 Javascript
2种jQuery 实现刮刮卡效果
Feb 01 Javascript
Node.js的项目构建工具Grunt的安装与配置教程
May 12 Javascript
Javascript自执行匿名函数(function() { })()的原理浅析
May 15 Javascript
JS实现动态表格的添加,修改,删除功能(推荐)
Jun 15 Javascript
Sortable.js拖拽排序使用方法解析
Nov 04 Javascript
JavaScript与Java正则表达式写法的区别介绍
Aug 15 Javascript
详解Angular操作cookies方法
Jun 01 Javascript
Vee-validate 父组件获取子组件表单校验结果的实例代码
May 20 Javascript
详解如何在Javascript和Sass之间共享变量
Nov 13 Javascript
微信小程序实现点击生成随机验证码
Sep 09 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
聊天室php&amp;mysql(四)
2006/10/09 PHP
yii实现创建验证码实例解析
2014/07/31 PHP
支付宝接口开发集成支付环境小结
2015/03/17 PHP
深入浅析Yii admin的权限控制
2016/08/31 PHP
php usort 使用用户自定义的比较函数对二维数组中的值进行排序
2017/05/02 PHP
简单实现php上传文件功能
2017/09/21 PHP
jQuery 1.5最新版本的改进细节分析
2011/01/19 Javascript
iframe里面的元素触发父窗口元素事件的jquery代码
2014/10/19 Javascript
javascript正则表达式总结
2016/02/29 Javascript
HTML5+jQuery插件Quicksand实现超酷的星际争霸2兵种分类展示效果(附demo源码下载)
2016/05/25 Javascript
AngularJS入门教程之多视图切换用法示例
2016/11/02 Javascript
关于BootStrap modal 在IOS9中不能弹出的解决方法(IOS 9 bootstrap modal ios 9 noticework)
2016/12/14 Javascript
Vue.js简易安装和快速入门(第二课)
2017/10/17 Javascript
jQuery实现手机号正则验证输入及自动填充空格功能
2018/01/02 jQuery
浅谈ajax请求不同页面的微信JSSDK问题
2018/02/26 Javascript
vue异步axios获取的数据渲染到页面的方法
2018/08/09 Javascript
vue-amap根据地址回显地图并mark的操作
2020/11/03 Javascript
[45:17]DOTA2-DPC中国联赛定级赛 Phoenix vs DLG BO3第三场 1月9日
2021/03/11 DOTA
Python DataFrame.groupby()聚合函数,分组级运算
2018/09/18 Python
简单了解python装饰器原理及使用方法
2019/12/18 Python
Python异步编程之协程任务的调度操作实例分析
2020/02/01 Python
python 项目目录结构设置
2020/02/14 Python
Django更新models数据库结构步骤
2020/04/01 Python
Django框架获取form表单数据方式总结
2020/04/22 Python
python绘制分布折线图的示例
2020/09/24 Python
Python爬虫进阶之爬取某视频并下载的实现
2020/12/08 Python
美国高街时尚品牌:OASAP
2016/07/24 全球购物
Sofft鞋官网:世界知名鞋类品牌
2017/03/28 全球购物
美国的Eastbay旗下的运动款子品牌:Final-Score
2018/01/01 全球购物
Hotter Shoes美国官网:英国最受欢迎的舒适鞋
2018/08/02 全球购物
美容院营销方案
2014/03/05 职场文书
2015年销售部工作总结范文
2015/04/27 职场文书
求职意向书范本
2015/05/11 职场文书
入队仪式主持词
2015/07/04 职场文书
英语教学课后反思
2016/02/15 职场文书
在ubuntu下安装go开发环境的全过程
2022/08/05 Golang