详解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 相关文章推荐
在Ajax中使用Flash实现跨域数据读取的实现方法
Dec 02 Javascript
各浏览器对document.getElementById等方法的实现差异解析
Dec 05 Javascript
Node.js中的process.nextTick使用实例
Jun 25 Javascript
JS动态给对象添加属性和值的实现方法
Oct 21 Javascript
非常实用的vue导航钩子
Mar 20 Javascript
springMVC + easyui + $.ajaxFileUpload实现文件上传注意事项
Apr 23 Javascript
JS图片轮播与索引变色功能实例详解
Jul 06 Javascript
深入浅析angular和vue还有jquery的区别
Aug 13 jQuery
JQuery特殊效果和链式调用操作示例
May 13 jQuery
layui 表格操作列按钮动态显示的实现方法
Sep 06 Javascript
layui点击按钮页面会自动刷新的解决方案
Oct 25 Javascript
Vue打包部署到Nginx时,css样式不生效的解决方式
Aug 03 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
PHP生成二维码的两个方法和实例
2014/07/01 PHP
php分页函数完整实例代码
2014/09/22 PHP
写一段简单的PHP建立文件夹代码
2015/01/06 PHP
php中引用&amp;的用法分析【变量引用,函数引用,对象引用】
2016/12/12 PHP
PHP编程计算文件或数组中单词出现频率的方法
2017/05/22 PHP
PHP长网址与短网址的实现方法
2017/10/13 PHP
PHP实现数据库的增删查改功能及完整代码
2018/04/18 PHP
Laravel等框架模型关联的可用性浅析
2019/12/15 PHP
JS下高效拼装字符串的几种方法比较与测试代码
2010/04/15 Javascript
javascipt基础内容--需要注意的细节
2013/04/10 Javascript
通过Jquery的Ajax方法读取将table转换为Json
2014/05/31 Javascript
jQuery CSS()方法改变现有的CSS样式
2014/08/20 Javascript
JavaScript中九种常用排序算法
2014/09/02 Javascript
jQuery学习笔记之jQuery+CSS3的浏览器兼容性
2015/01/19 Javascript
jquery插件tytabs.jquery.min.js实现渐变TAB选项卡效果
2015/08/25 Javascript
jquery实现的淡入淡出下拉菜单效果
2015/08/25 Javascript
谈谈我对JavaScript原型和闭包系列理解(随手笔记8)
2015/12/24 Javascript
jQuery基于cookie实现的购物车实例分析
2015/12/24 Javascript
jQ处理xml文件和xml字符串的方法(详解)
2016/11/22 Javascript
限时抢购-倒计时的完整实例(分享)
2017/09/17 Javascript
vue 获取url里参数的两种方法小结
2020/11/12 Javascript
[00:37]2016完美“圣”典风云人物:rOtk宣传片
2016/12/09 DOTA
[01:03:59]2018DOTA2亚洲邀请赛3月30日 小组赛B组VGJ.T VS Secret
2018/03/31 DOTA
在Django中管理Users和Permissions以及Groups的方法
2015/07/23 Python
Python无损音乐搜索引擎实现代码
2018/02/02 Python
python3 图片referer防盗链的实现方法
2018/03/12 Python
在python中利用KNN实现对iris进行分类的方法
2018/12/11 Python
Python3中编码与解码之Unicode与bytes的讲解
2019/02/28 Python
详解django+django-celery+celery的整合实战
2019/03/19 Python
Python流程控制语句的深入讲解
2020/06/15 Python
如何编写python的daemon程序
2021/01/07 Python
CSS3制作文字半透明倒影效果的两种实现方式
2014/08/08 HTML / CSS
励志演讲稿800字
2014/08/21 职场文书
售票员岗位职责
2015/02/15 职场文书
2015年监理个人工作总结
2015/05/23 职场文书
2016年“我们的节日·重阳节”主题活动总结
2016/04/01 职场文书