vue父子组件通信(prop)
先定义子组件,注册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)的更多相关文章
- Vue父子组件通信(父级向子级传递数据、子级向父级传递数据、Vue父子组件存储到data数据的访问)
Vue父子组件通信(父级向子级传递数据.子级向父级传递数据.Vue父子组件存储到data数据的访问) 一.父级向子级传递数据[Prop]: ● Prop:子组件在自身标签上,使用自定义的属性来接收外界 ...
- vue 父子组件通信
算是初学vue,整理一下父子组件通信笔记. 父组件通过 prop 给子组件下发数据,子组件通过事件给父组件发送消息. 一.父组件向子组件下发数据: 1.在子组件中显式地用props选项声明它预期的数据 ...
- vue父子组件通信高级用法
vue项目的一大亮点就是组件化.使用组件可以极大地提高项目中代码的复用率,减少代码量.但是使用组件最大的难点就是父子组件之间的通信. 子通信父 父组件 <template> <div ...
- vue 父子组件通信详解
这是一篇详细讲解vue父子组件之间通信的文章,初始学习vue的时候,总是搞不清楚几个情况 通过props在父子组件传值时,v-bind:data="data",props接收的到底 ...
- vue父子组件通信
一.父子组件间通信 vue.js 2.0提供了一个ref 的属性: 可以为子组件指定一个索引id 父组件: <template> <div id='user-login'> & ...
- vue 父子组件通信props/emit
props 1.父组件传递数据给子组件 父组件: <parent> <child :childMsg="msg"></child>//这里必须要 ...
- beego+vue父子组件通信(父子页面传值、父子组件传值、父子路由传值)
场景:有head和foot,为父组件 侧栏tree为子组件 点击tree,右侧孙组件根据点击tree的id,来更改表格内容. 首先是父子(本例中是子组件与孙组件)通信,目前是父传到子,暂时还没有子传到 ...
- vue父子组件通信传值
父组件 -> 子组件 通过props来进行通信 父组件代码: <Children :dataName = "dataContent" /> //dataName: ...
- Vue 父子组件通信入门
父组件向子组件传值 1.组件实例定义方式,注意:子组件一定要使用props属性来定义父组件传递过来的数据 <script type="text/javascript"> ...
随机推荐
- win10右击windows键没有反应解决方案(1707版本)
按Win+R打开运行,输入“regedit”打开注册表编辑器. 2.在“HKEY_CLASSES_ROOT”主键下找到“linkfile”或者".lnkfile"字符串值项,在右侧 ...
- wpf textblock超出显示范围后显示tooltip
public static class TextTrmmingShowToolTip { public static readonly DependencyProperty IsToolTipProp ...
- linux 开启终端256色支持
一.简介 一般的Linux发行版默认的终端都是16色的,但事实上几乎所有的终端都支持256色终端.本文介绍开启终端256色支持的方法. 二.操作步骤 1)检查终端是否支持256色 http://www ...
- Luogu 3939 数颜色
随手点开一个题. 咦,这不是裸的动态开点线段树吗?写一个写一个…… Code: #include <cstdio> #include <cstring> using names ...
- 什么是MTU,如何检测和设置路由器MTU值
最大传输单元(Maximum Transmission Unit,MTU)是指一种通信协议的某一层上面所能通过的最大数据包大小(以字节为单位).最大传输单元这个参数通常与通信接口有关(网络接口卡.串口 ...
- 小小c#算法题 - 7 - 堆排序 (Heap Sort)
在讨论堆排序之前,我们先来讨论一下另外一种排序算法——插入排序.插入排序的逻辑相当简单,先遍历一遍数组找到最小值,然后将这个最小值跟第一个元素交换.然后遍历第一个元素之后的n-1个元素,得到这n-1个 ...
- Java50道经典习题-程序27 求素数
题目:求100之内的素数分析:素数即除了1和它本身以外不再有其他因数,最小的素数是2 判断一个数n是否是素数的方法:将n分别与2到(n+1)/2取余,若有一个值为0,则n就不为素数,反之为素数 pub ...
- Django会话,用户和注册之cookie
HTTP状态和TCP不一样,HTTP是无状态的,也就是这一次请求和下一次请求之间没有任何状态保持,我们无法根据请求例如IP来识别是否在同一人的连续性请求.就像我们在访问网站的时候,输入了用户名和密码, ...
- linux配置环境变量 - 认识
环境 ubuntu17.04 终端(就是黑框) 认识 环境变量:$PATH 在 ×××/bin 下的命令,可以不用到指定目录下, 比如:安装hbase后,hbase提供一些shell命令在habse ...
- [SinGuLaRiTy] 2017-07-22 NOIP2017 模拟赛
[SInGuLaRiTy-1029] Copyright (c) SinGuLaRiTy 2017. All Rights Reserved. <全是看看代码就会的水题,偷个懒不单独写题解了~& ...