先定义子组件,注册prop接收父组件传递的值

<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>

prop只能父组件传递给子组件,子组件不能修改父组件的data

vue父子组件通信(prop)的更多相关文章

  1. Vue父子组件通信(父级向子级传递数据、子级向父级传递数据、Vue父子组件存储到data数据的访问)

    Vue父子组件通信(父级向子级传递数据.子级向父级传递数据.Vue父子组件存储到data数据的访问) 一.父级向子级传递数据[Prop]: ● Prop:子组件在自身标签上,使用自定义的属性来接收外界 ...

  2. vue 父子组件通信

    算是初学vue,整理一下父子组件通信笔记. 父组件通过 prop 给子组件下发数据,子组件通过事件给父组件发送消息. 一.父组件向子组件下发数据: 1.在子组件中显式地用props选项声明它预期的数据 ...

  3. vue父子组件通信高级用法

    vue项目的一大亮点就是组件化.使用组件可以极大地提高项目中代码的复用率,减少代码量.但是使用组件最大的难点就是父子组件之间的通信. 子通信父 父组件 <template> <div ...

  4. vue 父子组件通信详解

    这是一篇详细讲解vue父子组件之间通信的文章,初始学习vue的时候,总是搞不清楚几个情况 通过props在父子组件传值时,v-bind:data="data",props接收的到底 ...

  5. vue父子组件通信

    一.父子组件间通信 vue.js 2.0提供了一个ref 的属性: 可以为子组件指定一个索引id 父组件: <template> <div id='user-login'> & ...

  6. vue 父子组件通信props/emit

    props 1.父组件传递数据给子组件 父组件: <parent> <child :childMsg="msg"></child>//这里必须要 ...

  7. beego+vue父子组件通信(父子页面传值、父子组件传值、父子路由传值)

    场景:有head和foot,为父组件 侧栏tree为子组件 点击tree,右侧孙组件根据点击tree的id,来更改表格内容. 首先是父子(本例中是子组件与孙组件)通信,目前是父传到子,暂时还没有子传到 ...

  8. vue父子组件通信传值

    父组件 -> 子组件 通过props来进行通信 父组件代码: <Children :dataName = "dataContent" /> //dataName: ...

  9. Vue 父子组件通信入门

    父组件向子组件传值 1.组件实例定义方式,注意:子组件一定要使用props属性来定义父组件传递过来的数据 <script type="text/javascript"> ...

随机推荐

  1. Angular01 利用grunt搭建自动web前端开发环境、利用angular-cli搭建web前端项目

    搭建angular开发环境 一.下载并安装node 官网地址:点击前往 二.利用npm安装cnpm 安装好node后就可以使用npm命令啦 查看版本:npm -v 安装cnpm:npm install ...

  2. 前端学习笔记2017.6.21-引入JS文件的方法

    通过网络引入JS文件 <script src="https://www.xxx.com/aaa.js"></script> 如果是引入本地JS文件 < ...

  3. BMP是可以保存alpha通道的。

    一直以来都不太熟悉BMP格式,今天保存图片的时候发现bmp是可以保存透明通道的,突然想起来以前下载的一些游戏素材贴图里面就有一些bmp格式的贴图.记录一下.

  4. NSClassFromString 实例话静态库中的类

    Class myClass = NSClassFromString("StaticLibyClassName"); StaticLibyClassName是从静态库中实例化一个Cl ...

  5. Luogu 2254 [NOI2005]瑰丽华尔兹

    简单dp,设$f_{i,j,k}$表示第i个时间段,钢琴处在(j,k)位置移动距离的最大值,那么有转移 $f_{i, j, k} = max(f_{i - 1, j, k}) ,  f_{i, j, ...

  6. Luogu U15118 萨塔尼亚的期末考试(fail)

    感觉...昨天是真的傻... 题意 T个询问,每个询问给一个n,求 $ \frac{\sum_{n}^{i = 1}Fib_{i} * i}{n * (n + 1) / 2} $ Fib是斐波那契数列 ...

  7. GPG入门

    GPG入门   摘自https://www.jianshu.com/p/1257dbf3ed8e   Nitroethane 关注 2016.07.19 17:36* 字数 1003 阅读 6560评 ...

  8. 使用IDEA编译spark 1.5并运行example的代码

    操作系统:windows 10 IDEA : IDEA 14.1.4 1:使用IDEA导入spark 1.5的源码,注意maven配置为自动导入 2:在maven窗口下的profiles中勾选hado ...

  9. 常用Git命令清单

    我现在工作几乎每天都使用 Git ,但是很多命令记不住. 一般来说,日常使用只要记住下图6个命令,就可以了.但是熟练使用,恐怕要记住60-100个命令. 下面是我整理的常用 Git 命令清单.几个专用 ...

  10. 删除iCloud手机备份

    问题描述 系统9.3.5提示iCloud空间即将满,遂清理一下,发现空间主要被备份文件占用,于是想着删除备份文件,但是手机中的清理iCloud列表中并未找到相关备份文件.最终通过Mac电脑中的iClo ...