详解Vue之父子组件传值

更新时间：2019年04月01日 14:40:49 作者：咸鱼最牛逼

这篇文章主要介绍了Vue之父子组件传值，文中通过示例代码介绍的非常详细，对大家的学习或者工作具有一定的参考学习价值，需要的朋友们下面随着小编来一起学习学习吧

一、简要介绍

父子组件之间的传值主要有三种：传递数值、传递方法、传递对象，主要是靠子组件的 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之父子组件传值详解整合，希望对大家有所帮助，如果大家有任何疑问请给我留言，小编会及时回复大家的。在此也非常感谢大家对脚本之家网站的支持！

您可能感兴趣的文章:

vue2.x,vue3.x使用provide/inject注入的区别说明
这篇文章主要介绍了vue2.x,vue3.x使用provide/inject注入的区别说明，具有很好的参考价值，希望对大家有所帮助。如有错误或未考虑完全的地方，望不吝赐教
2023-04-04
element 穿梭框性能优化的实现
本文主要介绍了element 穿梭框性能优化，文中通过示例代码介绍的非常详细，具有一定的参考价值，感兴趣的小伙伴们可以参考一下
2021-10-10
如何用vue封装axios请求
对axios进行封装以及将API接口按业务模块统一管理，有助于我们简化代码，方便后期维护。本文介绍了如何用vue封装axios请求，感兴趣的同学，可以参考下。
2021-06-06
vue resource发送请求的几种方式
这篇文章主要介绍了vue resource发送请求的几种方式，代码简单易懂，非常不错，具有一定的参考借鉴价值,需要的朋友可以参考下
2019-09-09
前端新手小白的Vue3入坑超详细指南
这篇文章主要介绍了如何使用Vite安装和启动Vue3项目,并推荐了一些常用的第三方库,如js-tool-big-box、less或sass预处理器、axios请求库以及Element Plus UI库,需要的朋友可以参考下
2024-12-12
强烈推荐!Vue3.2中的setup语法糖
script setup是vue3的新语法糖,并不是新增的功能模块,只是简化了以往的组合式API必须返回(return)的写法,并且有更好的运行时性能,这篇文章主要给大家介绍了关于Vue3.2中setup语法糖的相关资料,需要的朋友可以参考下
2021-12-12
解决vue 格式化银行卡(信用卡)每4位一个符号隔断的问题
这篇文章主要介绍了vue 格式化银行卡（信用卡）每4位一个符号隔断的问题，本文给大家分享了解决方法,需要的朋友可以参考下
2018-09-09
vant中的Cascader级联选择异步加载地区数据方式
这篇文章主要介绍了vant中的Cascader级联选择异步加载地区数据方式,具有很好的参考价值,希望对大家有所帮助,如有错误或未考虑完全的地方,望不吝赐教
2024-07-07
Vue中$emit调用父组件异步方法模拟.then实现方式
这篇文章主要介绍了Vue中$emit调用父组件异步方法模拟.then实现方式,具有很好的参考价值,希望对大家有所帮助,如有错误或未考虑完全的地方,望不吝赐教
2024-09-09
Vue基于Element-ui实现表格弹窗组件
这篇文章主要为大家详细介绍了Vue基于Element-ui实现表格弹窗组件，文中示例代码介绍的非常详细，具有一定的参考价值，感兴趣的小伙伴们可以参考一下
2022-04-04

详解Vue之父子组件传值

相关文章

最新评论

大家感兴趣的内容

最近更新的内容

常用在线小工具