详解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 相关文章推荐
准确获得页面、窗口高度及宽度的JS
Nov 26 Javascript
js使用递归解析xml
Dec 12 Javascript
jquery实现先淡出再折叠收起的动画效果
Aug 07 Javascript
解决JS请求服务器gbk文件乱码的问题
Oct 16 Javascript
JavaScript的ExtJS框架中表格的编写教程
May 21 Javascript
jQuery+PHP实现微信转盘抽奖功能的方法
May 25 Javascript
js实现按钮控制带有停顿效果的图片滚动
Aug 30 Javascript
Node.js中看JavaScript的引用
Apr 22 Javascript
react-native 封装选择弹出框示例(试用ios&amp;android)
Jul 11 Javascript
Angular.js项目中使用gulp实现自动化构建以及压缩打包详解
Jul 19 Javascript
微信小程序之发送短信倒计时功能
Aug 30 Javascript
解决vue单页面 回退页面 keeplive 缓存问题
Jul 22 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
echo(),print(),print_r()之间的区别?
2006/11/19 PHP
php中计算时间差的几种方法
2009/12/31 PHP
一些PHP Coding Tips(php小技巧)[2011/04/02最后更新]
2011/05/02 PHP
php中防止恶意刷新页面的代码小结
2012/10/31 PHP
php 批量添加多行文本框textarea一行一个
2014/06/03 PHP
destoon实现VIP排名一直在前面排序的方法
2014/08/21 PHP
php实现在限定区域里自动调整字体大小的类实例
2015/04/02 PHP
PHP大文件分块上传功能实例详解
2019/07/22 PHP
基于Web标准的UI组件 — 树状菜单(2)
2006/09/18 Javascript
extjs3 combobox取value和text案例详解
2013/02/06 Javascript
js中substr,substring,indexOf,lastIndexOf的用法小结
2013/12/27 Javascript
js实现图片在未加载完成前显示加载中字样
2014/09/03 Javascript
jQuery实现的简单提示信息插件
2015/12/08 Javascript
JS实现放大、缩小及拖拽图片的方法【可兼容IE、火狐】
2016/08/23 Javascript
很棒的js Tab选项卡切换效果
2016/08/30 Javascript
jQuery查找节点并获取节点属性的方法
2016/09/09 Javascript
Angular 4依赖注入学习教程之FactoryProvider配置依赖对象(五)
2017/06/04 Javascript
简单理解Vue中的nextTick方法
2018/01/30 Javascript
vue中使用极验验证码的方法(附demo)
2019/12/04 Javascript
javascript设计模式 ? 享元模式原理与用法实例分析
2020/04/15 Javascript
python监控文件或目录变化
2016/06/07 Python
python Spyder界面无法打开的解决方法
2018/04/27 Python
通过python顺序修改文件名字的方法
2018/07/11 Python
Python生成验证码、计算具体日期是一年中的第几天实例代码详解
2019/10/16 Python
pycharm安装及如何导入numpy
2020/04/03 Python
基于python实现复制文件并重命名
2020/09/16 Python
加拿大时尚潮流大码女装购物网站:Addition Elle
2018/04/02 全球购物
Watch Station官方网站:世界一流的手表和智能手表
2020/01/05 全球购物
铭立家具面试题
2012/12/06 面试题
《乌塔》教学反思
2014/02/17 职场文书
统计专业自荐书
2014/07/06 职场文书
车贷收入证明范本
2014/09/14 职场文书
《海上日出》教学反思
2016/02/23 职场文书
2016年社区中秋节活动总结
2016/04/05 职场文书
详解Python魔法方法之描述符类
2021/05/26 Python
CSS实现九宫格布局(自适应)的示例代码
2022/02/12 HTML / CSS