基于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 相关文章推荐
JSON.parse 解析字符串出错的解决方法
Jul 08 Javascript
jQuery UI Autocomplete 体验分享
Feb 14 Javascript
获取非最后一列td值并将title设为该值的方法
Oct 30 Javascript
js+css实现的简单易用兼容好的分页
Dec 30 Javascript
jQuery学习笔记之jQuery原型属性和方法
Jun 09 Javascript
JavaScript Function函数类型介绍
Apr 08 Javascript
JavaScript中reduce()方法的使用详解
Jun 09 Javascript
谈谈PHP中相对路径的问题与绝对路径的使用
Aug 16 Javascript
JS中BOM相关知识点总结(必看篇)
Nov 22 Javascript
webpack vue项目开发环境局域网访问方法
Mar 20 Javascript
详解如何解决vue开发请求数据跨域的问题(基于浏览器的配置解决)
Nov 12 Javascript
js实现简单点赞操作
Mar 17 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下把数组保存为文件格式的实例应用
2010/02/08 PHP
浅谈php的TS和NTS的区别
2019/03/13 PHP
理运用命名空间让js不产生冲突避免全局变量的泛滥
2014/06/15 Javascript
根据当前时间在jsp页面上显示上午或下午
2014/08/18 Javascript
Jquery 效果使用详解
2015/11/23 Javascript
json对象与数组以及转换成js对象的简单实现方法
2016/06/24 Javascript
基于jQuery实现表格内容的筛选功能
2016/08/21 Javascript
js监听键盘事件的方法_原生和jquery的区别详解
2016/10/10 Javascript
vue完成项目后,打包成静态文件的方法
2018/09/03 Javascript
JavaScript中的事件与异常捕获详析
2019/02/24 Javascript
IE11下处理Promise及Vue的单项数据流问题
2019/07/24 Javascript
使用webpack搭建pixi.js开发环境
2020/02/12 Javascript
vue实现移动端H5数字键盘组件使用详解
2020/08/25 Javascript
浅谈Python单向链表的实现
2015/12/24 Python
CentOS6.5设置Django开发环境
2016/10/13 Python
浅谈Python基础之I/O模型
2017/05/11 Python
python实现随机森林random forest的原理及方法
2017/12/21 Python
django反向解析和正向解析的方式
2018/06/05 Python
python 读取视频,处理后,实时计算帧数fps的方法
2018/07/10 Python
Django中的forms组件实例详解
2018/11/08 Python
python运行时强制刷新缓冲区的方法
2019/01/14 Python
Python实现的文轩网爬虫完整示例
2019/05/16 Python
一行Python代码过滤标点符号等特殊字符
2019/08/12 Python
CSS3悬停效果案例应用
2012/11/21 HTML / CSS
NBA德国官方网上商店:NBA Store德国
2018/04/13 全球购物
英国在线照明超市:Castlegate Lights
2019/10/30 全球购物
美国家居装饰店:Z Gallerie
2020/12/28 全球购物
泰国第一在线超市:Tops
2021/02/13 全球购物
基层干部十八大感言
2014/01/19 职场文书
关于圣诞节的广播稿
2014/01/26 职场文书
旅游饭店管理专业自荐书
2014/06/28 职场文书
标准单位租车协议书
2014/09/23 职场文书
行政答辩状范文
2015/05/21 职场文书
2015年会计工作总结范文
2015/05/26 职场文书
浅谈Python3中datetime不同时区转换介绍与踩坑
2021/08/02 Python
nginx刷新页面出现404解决方案(亲测有效)
2022/03/18 Servers