详解vue父子组件间传值(props)

更新时间：2017年06月29日 10:03:32 作者：ygtq

本篇文章主要介绍了详解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中的export default和export使用方法解析
export default和export都能导出一个模块里面的常量，函数，文件，模块等，在其它文件或模块中通过import来导入常量，函数，文件或模块。但是，在一个文件或模块中export,import可以有多个，export default却只能有一个。
2022-12-12
Vue实现模糊查询-Mysql数据库数据
这篇文章主要介绍了基于Vue实现Mysql数据库数据模糊查询,下面文章我们主要实现的是输入框中输入数据，根据输入的结果模糊搜索数据库对应内容，实现模糊查询，感兴趣的小伙伴可以进入文章我们一起学习
2021-12-12
Vue.js通用应用框架-Nuxt.js的上手教程
本篇文章主要介绍了Vue.js通用应用框架-Nuxt.js的上手教程，小编觉得挺不错的，现在分享给大家，也给大家做个参考。一起跟随小编过来看看吧
2017-12-12
vue项目中进行svg组件封装及配置方法步骤
本文主要介绍了vue项目中进行svg组件封装及配置方法步骤，文中通过示例代码介绍的非常详细，具有一定的参考价值，感兴趣的小伙伴们可以参考一下
2021-11-11
vue路由守卫,限制前端页面访问权限的例子
今天小编就为大家分享一篇vue路由守卫,限制前端页面访问权限的例子，具有很好的参考价值，希望对大家有所帮助。一起跟随小编过来看看吧
2019-11-11
Vue中Mixin的正确用法详解
众所周知，vue 的 mixins 是个非常灵活，但又很容易带来混乱的 API，Mixins 本该是一种强大的重用代码的手段，但使用之后往往带来更多的混乱，代码变得不易维护，本文就详细介绍Vue Mixin的正确用法,需要的朋友可以参考下
2023-06-06
浅谈Vue开发人员的7个最好的VSCode扩展
这篇文章主要介绍了浅谈Vue开发人员的7个最好的VSCode扩展，文中通过示例代码介绍的非常详细，对大家的学习或者工作具有一定的参考学习价值，需要的朋友们下面随着小编来一起学习学习吧
2021-01-01
vue实现条件叠加搜索的解决方法
这篇文章主要为大家详细介绍了vue实现条件叠加搜索的解决方法，具有一定的参考价值，感兴趣的小伙伴们可以参考一下
2019-05-05
vue终极性能优化方案(解决首页加载慢问题)
最近在做项目中前端采用Vue技术,发现首页加载速度非常之慢,下面这篇文章主要给大家介绍了关于vue终极性能优化方案,主要解决首页加载慢问题,需要的朋友可以参考下
2022-02-02
Vite结合whistle实现一劳永逸开发环境代理方案
这篇文章主要为大家介绍了Vite结合whistle实现一劳永逸开发环境代理方案，有需要的朋友可以借鉴参考下，希望能够有所帮助，祝大家多多进步，早日升职加薪
2022-07-07