基于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 相关文章推荐
Display SQL Server Version Information
Jun 21 Javascript
非html5实现js版弹球游戏示例代码
Sep 22 Javascript
Jquery的基本对象转换和文档加载用法实例
Feb 25 Javascript
JS实现简易图片轮播效果的方法
Mar 25 Javascript
基于jquery实现省市联动特效
Dec 17 Javascript
jquery正则表达式验证(手机号、身份证号、中文名称)
Dec 31 Javascript
JS闭包可被利用的常见场景小结
Apr 09 Javascript
原生javascript实现分页效果
Apr 21 Javascript
Vue实现双向数据绑定
May 03 Javascript
JavaScript中的高级函数
Jan 04 Javascript
微信小程序图片自适应实现解析
Jan 21 Javascript
实例讲解React 组件生命周期
Jul 08 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学习笔记之三 数据库基本操作
2011/01/17 PHP
php+memcache实现的网站在线人数统计代码
2014/07/04 PHP
PHP进程通信基础之信号量与共享内存通信
2017/02/19 PHP
jQuery 图像裁剪插件Jcrop的简单使用
2009/05/22 Javascript
Jquery获得控件值的三种方法总结
2014/02/13 Javascript
js单独获取一个checkbox看其是否被选中
2014/09/22 Javascript
js实现jquery的offset()方法实例
2015/01/10 Javascript
javascript从作用域链谈闭包
2020/07/29 Javascript
BootStrap智能表单实战系列(四)表单布局介绍
2016/06/13 Javascript
JS实现刷新父页面不弹出提示框的方法
2016/06/22 Javascript
js从外部获取图片的实现方法
2016/08/05 Javascript
使用ionic在首页新闻中应用到的跑马灯效果的实现方法
2017/02/13 Javascript
用ES6的class模仿Vue写一个双向绑定的示例代码
2018/04/20 Javascript
Nodejs使用Mongodb存储与提供后端CRD服务详解
2018/09/04 NodeJs
在vue项目中集成graphql(vue-ApolloClient)
2018/09/08 Javascript
vue滚动tab跟随切换效果
2020/06/29 Javascript
javascript设计模式 ? 组合模式原理与应用实例分析
2020/04/14 Javascript
swiper4实现移动端导航栏tab滑动切换
2020/10/16 Javascript
[02:17]2016完美“圣”典风云人物:Sccc专访
2016/12/03 DOTA
python使用正则表达式分析网页中的图片并进行替换的方法
2015/03/26 Python
用Python shell简化开发
2018/08/08 Python
python+selenium实现自动抢票功能实例代码
2018/11/23 Python
梅尔频率倒谱系数(mfcc)及Python实现
2019/06/18 Python
python数据持久存储 pickle模块的基本使用方法解析
2019/08/30 Python
使用python实现画AR模型时序图
2019/11/20 Python
浅谈Tensorflow 动态双向RNN的输出问题
2020/01/20 Python
Python3如何判断三角形的类型
2020/04/12 Python
Python几种常见算法汇总
2020/06/02 Python
英国最红的高街时尚品牌:Topshop
2016/08/05 全球购物
JD Sports比利时官网:英国领先的运动鞋和运动服饰零售商
2018/10/10 全球购物
优秀教师获奖感言
2014/01/31 职场文书
学校领导班子四风问题整改意见
2014/10/02 职场文书
《曹冲称象》教学反思
2016/02/20 职场文书
责任书格式
2019/04/18 职场文书
在Spring-Boot中如何使用@Value注解注入集合类
2021/08/02 Java/Android
SpringBoot连接MySQL获取数据写后端接口的操作方法
2021/11/02 MySQL