基于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 相关文章推荐
html下载本地
Jun 19 Javascript
javascript操作css属性
Dec 30 Javascript
一个JavaScript操作元素定位元素的实例
Oct 29 Javascript
jQuery通过扩展实现抖动效果的方法
Mar 11 Javascript
jQuery实现页面内锚点平滑跳转特效的方法总结
May 11 Javascript
vue.js中v-on:textInput无法执行事件问题的解决过程
Jul 12 Javascript
js 开发之autocomplete=&quot;off&quot;在chrom中失效的解决办法
Sep 28 Javascript
Vuex 进阶之模块化组织详解
Jan 12 Javascript
Next.js实现react服务器端渲染的方法示例
Jan 06 Javascript
详解js 创建对象的几种方法
Mar 08 Javascript
小程序实现新用户判断并跳转激活的方法
May 20 Javascript
ES6使用新特性Proxy实现的数据绑定功能实例
May 11 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
第十节--抽象方法和抽象类
2006/11/16 PHP
深入Memcache的Session数据的多服务器共享详解
2013/06/13 PHP
PHP PDOStatement::bindValue讲解
2019/01/30 PHP
Nigma vs Alliance BO5 第三场2.14
2021/03/10 DOTA
用倒置滤镜把div倒置,再把table倒置。
2007/07/31 Javascript
jquery日历控件实现方法分享
2014/03/07 Javascript
基于jquery实现页面滚动时顶部导航显示隐藏
2020/04/20 Javascript
基于javascript实现图片左右切换效果
2016/01/25 Javascript
js装饰设计模式学习心得
2018/02/17 Javascript
基于vue.js实现的分页
2018/03/13 Javascript
详解基于DllPlugin和DllReferencePlugin的webpack构建优化
2018/06/28 Javascript
详解在create-react-app使用less与antd按需加载
2018/12/06 Javascript
Vue实现简单计算器案例
2020/02/25 Javascript
基于Element封装一个表格组件tableList的使用方法
2020/06/29 Javascript
[03:42]2018完美盛典-《加冕》
2018/12/16 DOTA
用Python程序抓取网页的HTML信息的一个小实例
2015/05/02 Python
网站渗透常用Python小脚本查询同ip网站
2017/05/08 Python
python 统计列表中不同元素的数量方法
2018/06/29 Python
python对日志进行处理的实例代码
2018/10/06 Python
padas 生成excel 增加sheet表的实例
2018/12/11 Python
使用Python opencv实现视频与图片的相互转换
2019/07/08 Python
django中上传图片分页三级联动效果的实现代码
2019/08/30 Python
浅谈Django+Gunicorn+Nginx部署之路
2019/09/11 Python
Python定时任务APScheduler原理及实例解析
2020/05/30 Python
为你的html5网页添加音效示例
2014/04/03 HTML / CSS
广州盈通面试题
2015/12/05 面试题
前台文员岗位职责
2013/12/28 职场文书
十周年庆典策划方案
2014/06/03 职场文书
酒后驾车标语
2014/06/30 职场文书
2014年高中生自我评价范文
2014/09/26 职场文书
2015年会计个人工作总结
2015/04/02 职场文书
学校教师师德师风承诺书
2015/04/28 职场文书
教师节表彰会主持词
2015/07/06 职场文书
2016年世界人口日宣传活动总结
2016/04/05 职场文书
企业管理制度设计时要注意的几种“常见病”!
2019/04/19 职场文书
廉政党课工作报告案例
2019/06/21 职场文书