vue的prop父子组件传值
props down, events up
父组件通过 props 向下传递数据给子组件;子组件通过 events 给父组件发送消息。
静态 props
要让子组件使用父组件的数据,需要通过子组件的 props 选项。给 childNode 添加一个 props 选项和需要的forChildMsg数据;
var
childNode = {
template: `
<div>
{{forChildMsg}}
</div>
`,
props: [
"for-child-msg"
]
};
动态 props
在模板中,要动态地绑定父组件的数据到子组件模板的 props,和绑定 Html 标签特性一样,在父组件的template模板里使用v-bind绑定;
<child :
for
-child-msg=
"childMsg2"
></child>
props 验证
Vue.component(
"example"
, {
props: {
// 基础类型检测, null意味着任何类型都行
propA: Number,
// 多种类型
propB: [String, Number],
还可以在 props 定义的数据中加入自定义验证函数,当函数返回 false 时,输出警告。该函数命名是规定叫validator,自定义函数名不会生效。
props: {
"for-child-msg"
: {
validator:
function
(value) {
return
value > 100;
}
}
}
data() {
return
{
ownChildMsg:
this
.forChildMsg
};
},
watch: {
forChildMsg() {
this
.ownChildMsg =
this
.forChildMsg;
}
}
type="text"
就会替换掉 type="date"
并把它破坏!庆幸的是,class
和 style
特性会稍微智能一些,即两边的值会被合并起来,从而得到最终的值。如果你不希望组件的根元素继承特性,你可以在组件的选项中设置 inheritAttrs: false
。
vue的prop父子组件传值的更多相关文章
- vue父子组件传值加例子
例子:http://element-cn.eleme.io/#/zh-CN/component/form 上进行改的 父传子:用prop:子组件能够改变父组件的值,是共享的,和父操作是 ...
- vue 非父子组件传值
/*非父子组件传值 1.新建一个js文件 然后引入vue 实例化vue 最后暴露这个实例 2.在要广播的地方引入刚才定义的实例 3.通过 VueEmit.$emit('名称','数据') 4.在接收收 ...
- 【vue】父组件主动调用子组件 /// 非父子组件传值
一 父组件主动调用子组件: 注意:在父组件使用子组件的标签上注入ref属性,例如: <div id="home"> <v-header ref="he ...
- Vue中非父子组件传值的问题
父子组件传值的问题,前面已经讲过,不再叙述,这里来说一种非父子组件的传值. vue官网指出,可以使用一个空vue实例作为事件中央线! 也就是说 非父子组件之间的通信,必须要有公共的实例(可以是空的), ...
- Vue非父子组件传值
<template> <div id="app"> <v-home></v-home> <br> <hr> ...
- 关于Vue父子组件传值(复杂数据类型的值)的细节点
vue 父子组件传值是很常见的,多数情况下都是父传递给子的值是基础数据类型,如string,number,boolean, 当父组件值被修改时,子组件能够实时的作出改变. 如果父子传值的类型是复杂数据 ...
- 一个故事讲懂vue父子组件传值
作者:李佳明同学链接:https://www.jianshu.com/p/2272b6ca0f0c 一个故事讲懂vue父子组件传值 讲故事前先讲代码 父组件向子组件传值 父组件数据传递给子组件可以通过 ...
- Vue组件传值(二)之 非父子组件传值
Vue中非父子组件之间是如何实现通信的? 本章主要讲的是非父子组件传值,父子组件传值请看上一篇文章. 1.创建新的Vue实例引入项目中,通过$emit.$on来实现非父子组件传值: 1 <!DO ...
- 【Vue】Vue中的父子组件通讯以及使用sync同步父子组件数据
前言: 之前写过一篇文章<在不同场景下Vue组件间的数据交流>,但现在来看,其中关于“父子组件通信”的介绍仍有诸多缺漏或者不当之处, 正好这几天学习了关于用sync修饰符做父子组件数据双向 ...
随机推荐
- 31.网络协议介绍tcp/udp
网络协议 TCP:网络中传输数据的协议,打电话 解决了我可能在网络中找不到别人(数据无法传输到) 保证数据传输的稳定性,可靠性 保证数据的安全性,完整性 对方要有响应 尝试重新发送 UDP:传输数据的 ...
- Kafka 1.1.0 服务端源码阅读笔记
网络层 01: 服务器的启动 02: Acceptor和Processor 03: RequestChannel API层 04: Handler和Apis 06: Produce请求(1): 写入本 ...
- C语言控制台软件制作
本题要求你写个程序把给定的符号打印成沙漏的形状.例如给定17个“*”,要求按下列格式打印 ***** *** * *** ***** 所谓“沙漏形状”,是指每行输出奇数个符号:各行符号中心对齐:相邻两 ...
- 1.3.4 并发工具类CountDownLatch/Semaphore/CyclicBarrier/FutureTask
CountDownLatch的2个用途: 1. 所有线程都到达相同的起跑线后,再一起开始跑(并非同时开始,而是队列中一个唤醒另一个)[此情况需到达起跑线后再调用await()等待其他线程] 2. 所有 ...
- IDEA插件之CheckStyle
1.是个啥? CheckStyle是一个检测代码格式是否满足规范的工具,其中用得比较多的是Google规范和Sun规范 2.下载安装插件 File -> Settings -> Plugi ...
- 【IDEA插件】—— 代码量统计工具Statistic
1.下载 1.打开idea设置界面,选择 plugins标签 2.搜索“Statistic”插件,点击 install 3.重启IDEA 2.使用 1.菜单栏中找到view 2.在下层目录中找到Sta ...
- 【LOJ】#3101. 「JSOI2019」精准预测
LOJ#3101. 「JSOI2019」精准预测 设0是生,1是死,按2-sat连边那么第一种情况是\((t,x,1) \rightarrow (t + 1,y,1)\),\((t + 1,y, 0) ...
- Date及DateFormat用法
Date 与DateFormat之间的转化String <————>Date Date与Calendar 之间的转化Long<————>Date 日历小程序 Scanner i ...
- Python 变量作用域与函数
Python 的创始人为吉多·范罗苏姆(Guido van Rossum).1989年的圣诞节期间,吉多·范罗苏姆为了在阿姆斯特丹打发时间,决心开发一个新的脚本解释程序,作为ABC语言的一种继承.Py ...
- ORACLE数据库 自动备份 定时计划任务 windows
疑问为什么没有输入oracle 的数据库安装目录就能直接备份呢,可能是因为oracle默认安装c盘,在docs命令直接能操作吧,不信可以使用sqlplus试试. 一共分三步: 一.建立一个.bat 批 ...