vue父组件向子组件(props)传递数据的方法

更新时间：2018年01月02日 09:39:20 投稿：mrr

这篇文章主要介绍了vue父组件向子组件(props)传递数据的方法,文中给大家补充介绍了vue父子组件间传值(props)的实现代码，需要的朋友可以参考下

vue页面结构

在做项目的时候常常有这样的一个情况，这个页面的数据（比如：id号）要带到另一个页面去查询某个数据的详情等，传统的作法不是在url上加参数，cookie或者是现在H5的“sessionStorage”和“localStorage”上赋值，这是页面之间传递的方法。

随着Angularjs,React,Vue的流行组件式的开发方式成为另一种不错的解决方案。

最近就有一些小伙伴问我，vue组件之间是如何传递参数的？其实vue是有三种方式可以组件之间传递数据（props，组件通信，slot），这次就说第一种方式如下：

a父组件内容：

引入b子组件import b form 'b.vue'

components: {'b-div': b} // 注册，只能在当前a组件里使用
<b-div :propsname='datas(向子组件传递的参数)'></b-div>

b子组件内容：

<template> <div>{{propsname}}</div> </template>
export default{
props: ['propsname'],
data(){}
}

只要在a组件中的datas的值一直在改变，在b子组件中props就会实时监听propsname的变化，在页面上也会做出相应的渲染，使用方式也是{{propsname}}。

PS：下面给大家介绍下vue父子组件间传值(props)

先定义一个子组件，在组件中注册props

<template>
  <div>
    <div>{{message}}(子组件)</div>
  </div>
</template>
<script>
export default {
  props: {
    message: String //定义传值的类型<br>  }
}
</script>
<style>
</style>

在父组件中，引入子组件，并传入子组件内需要的值

<template>
  <div>
    <div>父组件</div>
    <child :message="parentMsg"></child> 
  </div>
</template>
<script>
import child from './child' //引入child组件
export default {
  data() {
      return {
        parentMsg: 'a message from parent' //在data中定义需要传入的值
      }
    },
    components: {
      child
    }
}
</script>
<style>
</style>

这种方式只能由父向子传递，子组件不能更新父组件内的data

总结

以上所述是小编给大家介绍的vue父组件向子组件(props)传递数据的方法，希望对大家有所帮助，如果大家有任何疑问请给我留言，小编会及时回复大家的。在此也非常感谢大家对脚本之家网站的支持！

您可能感兴趣的文章:

vue计算属性computed的使用方法示例
这篇文章主要介绍了vue计算属性computed的使用方法,结合实例形式分析了vue计算属性computed的基本用法及相关操作注意事项,需要的朋友可以参考下
2019-03-03
vue动态菜单、动态路由加载以及刷新踩坑实战
这篇文章主要给大家介绍了关于vue动态菜单、动态路由加载以及刷新踩坑的相关资料,踩的这些坑其实是挺常见的,大家可以看看,避免遇到的时候再踩到同样的坑,需要的朋友可以参考下
2021-10-10
vue实现下拉框的多选功能(附后端处理参数)
本文介绍了如何使用Vue实现下拉框的多选功能,实现了在选择框中选择多个选项的功能,文章详细介绍了实现步骤和示例代码,对于想要了解如何使用Vue实现下拉框多选功能的读者具有一定的参考价值
2023-08-08
vite项目vite.config.js详细配置
vite.config.js是Vite框架中的配置文件,用于配置项目的构建和运行时的行为,下面这篇文章主要给大家介绍了关于vite项目vite.config.js详细配置的相关资料,需要的朋友可以参考下
2023-05-05
vue-devtools快速安装过程
vue-devtools是一款基于chrome游览器的插件,用于调试vue应用,这可以极大地提高我们的调试效率，这篇文章主要介绍了vue-devtools的安装,需要的朋友可以参考下
2023-08-08
Vue使用路由钩子拦截器beforeEach和afterEach监听路由
这篇文章主要介绍了Vue使用路由钩子拦截器beforeEach和afterEach监听路由,文中通过示例代码介绍的非常详细，对大家的学习或者工作具有一定的参考学习价值,需要的朋友可以参考下
2020-11-11
解决Vue3报错:Property “xxx“ was accessed during render but
这篇文章主要给大家介绍了关于解决Vue3报错:Property “xxx“ was accessed during render but is not defined on instance.的相关资料,文中通过图文介绍的非常详细,需要的朋友可以参考下
2023-01-01
在vue自定义组件中使用 v-model指令详情
这篇文章主要介绍了在vue自定义组件中使用 v-model指令详情，文章围绕主题展开详细的内容介绍，具有一定的参考价值，需要的小伙伴可以参考一下
2022-06-06
Element-UI el-calendar样式如何修改日历
这篇文章主要介绍了Element-UI el-calendar样式如何修改日历问题,具有很好的参考价值,希望对大家有所帮助,如有错误或未考虑完全的地方,望不吝赐教
2024-08-08
基于 Vue.js 2.0 酷炫自适应背景视频登录页面实现方式
本文讲述如何实现拥有酷炫背景视频的登录页面，浏览器窗口随意拉伸，背景视频及前景登录组件均能完美适配，背景视频可始终铺满窗口，前景组件始终居中，视频的内容始终得到最大限度的保留，可以得到最好的视觉效果
2018-01-01

vue父组件向子组件(props)传递数据的方法

相关文章

最新评论

大家感兴趣的内容

最近更新的内容

常用在线小工具