详解Vue之父子组件传值


Posted in Javascript onApril 01, 2019

一、简要介绍

父子组件之间的传值主要有三种:传递数值、传递方法、传递对象,主要是靠子组件的 props 属性来接收传值,下面分别介绍:

(一)传递数值

1.子组件:Header.vue

<template>
 <div>
  <!-- data对象里并没有 msg 属性,这里调用的是父类传递过来的 msg 属性 -->
  <h2>{{msg}}</h2>
 </div>
</template>
<script>
export default {
 data() {
  return {
  }
 },
 methods: {
 },
 // 接收父类的传值
 props: ['msg']
}
</script>

可以看到,在子组件中的data对象里并没有 msg 属性,这里调用的是父类传递过来的 msg 属性,接收就是靠 props: ['msg']。

2.父组件Home.vue

<template>
 <div>
  <!-- 2.使用子组件,并向子组件传值 -->
  <v-head :msg="msg"></v-head>

  <br>
  <br>
 </div>
</template>

<script>
// 1.引入子组件
import Head from './Head.vue';

export default {
 data() {
  return {
   msg: '我是一个组件'
  }
 },
 methods: {
 },
 components: {
  "v-head": Head
 },
 // 页面刷新时请求数据
 mounted() {
 }
}
</script>

传值的核心思想就是,在使用子组件的地方,加上要传递的值:<v-head :msg="msg"></v-head>

(二)传递方法

传递方法的写法和传递数值一样,下面只写出关键步骤:

父组件

<template>
 <div>
  <!-- 2.使用子组件,并向子组件传值 -->
  <v-head :run="run"></v-head>

  <br>
  <br>
 </div>
</template>

<script>
// 1.引入子组件
import Head from './Head.vue';

export default {
 data() {
  return {
   msg: '我是一个组件'
  }
 },
 methods: {
  run() {
   alert(this.msg);
  }
 },
 components: {
  "v-head": Head
 },
 // 页面刷新时请求数据
 mounted() {
 }
}
</script>

子组件

<template>
 <div>
  <button @click="run">接收父组件的方法</button>
 </div>
</template>
<script>
export default {
 data() {
  return {
  }
 },
 methods: {
 },
 // 接收父类的传值
 props: ['run']
}
</script>

(三)传递对象

传递对象的写法和传递数值一样,下面只写出关键步骤:

父组件

<template>
 <div>
  <!-- 2.使用子组件,并向子组件传值,这里的 this 就是 Home 组件 -->
  <v-head :home="this"></v-head>

  <br>
  <br>
 </div>
</template>

<script>
// 1.引入子组件
import Head from './Head.vue';

export default {
 data() {
  return {
   msg: '我是一个组件'
  }
 },
 methods: {
  run() {
   alert(this.msg);
  }
 },
 components: {
  "v-head": Head
 },
 // 页面刷新时请求数据
 mounted() {
 }
}
</script>

子组件

<template>
 <div>
  <!-- data对象里并没有 msg 属性,这里调用的是父类传递过来的 msg 属性 -->
  <h2>{{msg}}</h2>
  <br>
  <br>
  <button @click="run">接收父组件的方法</button>
 </div>
</template>
<script>
export default {
 data() {
  return {
   // 调用传过来的home组件的msg属性
   msg: this.home.msg
  }
 },
 methods: {
  run() {
   // 调用传过来的home组件的run()方法
   this.home.run();
  }
 },
 // 接收父类的传值
 props: ['home']
}
</script>

(四)传递数值类型校验

props: {
  'home': Object
 }

其他和上面类似!

以上所述是小编给大家介绍的Vue之父子组件传值详解整合,希望对大家有所帮助,如果大家有任何疑问请给我留言,小编会及时回复大家的。在此也非常感谢大家对三水点靠木网站的支持!

Javascript 相关文章推荐
Iframe自适应高度绝对好使的代码 兼容IE,遨游,火狐
Jan 27 Javascript
jQuery事件绑定.on()简要概述及应用
Feb 07 Javascript
文本框倒叙输入让输入框的焦点始终在最开始的位置
Sep 01 Javascript
JS更改select内option属性的方法
Oct 14 Javascript
浅谈Jquery中Ajax异步请求中的async参数的作用
Jun 06 Javascript
Vue开发过程中遇到的疑惑知识点总结
Jan 20 Javascript
基于JavaScript实现图片剪切效果
Mar 07 Javascript
原生Aajax 和jQuery Ajax 写法个人总结
Mar 24 jQuery
JS组件系列之MVVM组件 vue 30分钟搞定前端增删改查
Apr 28 Javascript
Bootstrap Table 在指定列中添加下拉框控件并获取所选值
Jul 31 Javascript
vue.js中引入vuex储存接口数据及调用的详细流程
Dec 14 Javascript
基于canvas实现手写签名(vue)
May 21 Javascript
微信二次分享报错invalid signature问题及解决方法
Apr 01 #Javascript
JS中的防抖与节流及作用详解
Apr 01 #Javascript
微信小程序 slot踩坑的解决
Apr 01 #Javascript
浅谈Vue.js 关于页面加载完成后执行一个方法的问题
Apr 01 #Javascript
VUE脚手架的下载和配置步骤详解
Apr 01 #Javascript
详解JavaScript中的函数、对象
Apr 01 #Javascript
Vue递归组件+Vuex开发树形组件Tree--递归组件的简单实现
Apr 01 #Javascript
You might like
浅析ThinkPHP的模板输出功能
2014/07/01 PHP
PHP实现PDO的mysql数据库操作类
2014/12/12 PHP
php调整服务器时间的方法
2015/04/03 PHP
swoole_process实现进程池的方法示例
2018/10/29 PHP
从Ajax到JQuery Ajax学习
2007/02/14 Javascript
Javascript String对象扩展HTML编码和解码的方法
2009/06/02 Javascript
Jquery Uploadify多文件上传带进度条且传递自己的参数
2013/08/28 Javascript
jquery交替变换颜色的三种方法 实例代码
2013/11/19 Javascript
jquery选择器排除某个DOM元素的方法(实例演示)
2014/04/25 Javascript
jQuery语法小结(超实用)
2015/12/31 Javascript
基于JS实现EOS隐藏错误提示层代码
2016/04/25 Javascript
浅析JavaScript Array和string的转换(推荐)
2016/05/20 Javascript
如何在Angular.JS中接收并下载PDF
2016/11/26 Javascript
基于jQuery实现的查看全文功能【实用】
2016/12/11 Javascript
详解React项目的服务端渲染改造(koa2+webpack3.11)
2018/03/19 Javascript
node中IO以及定时器优先级详解
2019/05/10 Javascript
Vue js with语句原理及用法解析
2020/09/03 Javascript
js轮播图之旋转木马效果
2020/10/13 Javascript
[01:00]一分钟回顾2018DOTA2亚洲邀请赛现场活动
2018/04/07 DOTA
定制FileField中的上传文件名称实例
2017/08/23 Python
Python3解决棋盘覆盖问题的方法示例
2017/12/07 Python
python kmeans聚类简单介绍和实现代码
2018/02/23 Python
django实现支付宝支付实例讲解
2019/10/17 Python
Python读取实时数据流示例
2019/12/02 Python
Python2 与Python3的版本区别实例分析
2020/03/30 Python
Pycharm生成可执行文件.exe的实现方法
2020/06/02 Python
CSS3旋转——彩色扇子兼容firefox浏览器
2013/06/04 HTML / CSS
详解如何将 Canvas 绘制过程转为视频
2021/01/25 HTML / CSS
学生社团文化节开幕式主持词
2014/03/28 职场文书
刊首寄语大全
2014/04/11 职场文书
禁毒宣传工作方案
2014/05/23 职场文书
交通事故协议书范文
2014/10/23 职场文书
鸟的天堂导游词
2015/01/31 职场文书
数学备课组工作总结
2015/08/12 职场文书
Windows下使用Nginx+Tomcat做负载均衡的完整步骤
2021/03/31 Servers
pdf论文中python画的图Type 3 fonts字体不兼容的解决方案
2021/04/24 Python