详解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 相关文章推荐
Javascript Global对象
Aug 13 Javascript
javascrpt绑定事件之匿名函数无法解除绑定问题
Dec 06 Javascript
js字符串转换成xml对象并使用技巧解读
Apr 18 Javascript
java中String类型变量的赋值问题介绍
Mar 23 Javascript
浅谈Angular中ngModel的$render
Oct 24 Javascript
js实现一个可以兼容PC端和移动端的div拖动效果实例
Dec 09 Javascript
JS敏感词过滤代码
Dec 23 Javascript
Vue 进入/离开动画效果
Dec 26 Javascript
Javascript 编码约定(编码规范)
Mar 11 Javascript
使用Object.defineProperty如何巧妙找到修改某个变量的准确代码位置
Nov 02 Javascript
WebGL学习教程之Three.js学习笔记(第一篇)
Apr 25 Javascript
vue等两个接口都返回结果再执行下一步的实例
Sep 08 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
Mysql中分页查询的两个解决方法比较
2013/05/02 PHP
解析php中curl_multi的应用
2013/07/17 PHP
PHP使用CURL实现多线程抓取网页
2015/04/30 PHP
nginx+thinkphp下解决不支持pathinfo模式
2015/07/01 PHP
yii2 数据库读写分离配置示例
2017/02/10 PHP
PHP如何防止XSS攻击与XSS攻击原理的讲解
2019/03/22 PHP
PHP实现八皇后算法
2019/05/06 PHP
JavaScript中Math对象方法使用概述
2014/01/02 Javascript
通过onmouseover选项卡实现img图片的变化
2014/02/12 Javascript
jquery实现保存已选用户
2014/07/21 Javascript
javascript针对不确定函数的执行方法
2015/12/16 Javascript
AngularJS 面试题集锦
2016/09/06 Javascript
AngularJS入门教程二:在路由中传递参数的方法分析
2017/05/27 Javascript
利用JS对iframe父子(内外)页面进行操作的方法教程
2017/06/15 Javascript
vue中$set的使用(结合在实际应用中遇到的坑)
2018/07/10 Javascript
监控微信小程序中的慢HTTP请求过程详解
2019/07/05 Javascript
layui动态加载多表头的实例
2019/09/05 Javascript
layui自定义验证,用ajax查询后台是否有重复数据,form.verify的例子
2019/09/06 Javascript
vue-cli3 取消eslint校验代码的解决办法
2020/01/16 Javascript
Webpack的Loader和Plugin的区别
2020/11/09 Javascript
[03:31]DOTA2英雄基础教程 大地之灵
2013/12/17 DOTA
[13:38]2015国际邀请赛中国战队出征仪式
2015/05/29 DOTA
django文档学习之applications使用详解
2018/01/29 Python
Python实现将json文件中向量写入Excel的方法
2018/03/26 Python
浅谈Python3识别判断图片主要颜色并和颜色库进行对比的方法
2019/10/25 Python
scrapy框架携带cookie访问淘宝购物车功能的实现代码
2020/07/07 Python
python爬取网易云音乐热歌榜实例代码
2020/08/07 Python
爬虫代理的cookie如何生成运行
2020/09/22 Python
大学生大二自我鉴定
2013/10/28 职场文书
浙江文明网签名寄语
2014/01/18 职场文书
医学专业职业生涯规划范文
2014/02/05 职场文书
终止劳动合同协议书
2014/10/05 职场文书
网吧温馨提示
2015/07/17 职场文书
导游词之山东红叶谷
2019/10/31 职场文书
php png失真的原因及解决办法
2021/10/24 PHP
Redis中缓存穿透/击穿/雪崩问题和解决方法
2021/12/04 Redis