props down, events up

父组件通过 props 向下传递数据给子组件;子组件通过 events 给父组件发送消息。

静态 props

要让子组件使用父组件的数据,需要通过子组件的 props 选项。给 childNode 添加一个 props 选项和需要的forChildMsg数据;

var childNode = {
 template: `
  <div>
   {{forChildMsg}}
  </div>
  `,
 props: ["for-child-msg"]
};
props 声明的属性,在父组件的 template 模板代表子组件的地方,属性名需要使用中划线写法;
子组件 props 属性声明时,使用小驼峰或者中划线写法都可以;而子组件的模板使用从父组件传来的变量时,需要使用对应的小驼峰写法
 

动态 props

在模板中,要动态地绑定父组件的数据到子组件模板的 props,和绑定 Html 标签特性一样,在父组件的template模板里使用v-bind绑定;

<child :for-child-msg="childMsg2"></child>
 
props 验证
验证传入的 props 参数的数据规格,如果不符合数据规格,Vue 会发出警告。

Vue.component("example", {
 props: {
 // 基础类型检测, null意味着任何类型都行
 propA: Number,
 // 多种类型
 propB: [String, Number],还可以在 props 定义的数据中加入自定义验证函数,当函数返回 false 时,输出警告。该函数命名是规定叫validator,自定义函数名不会生效。

props: {
 "for-child-msg": {
  validator: function(value) {
  return value > 100;
  }
 }
}
 
单向数据流
props 是单向绑定的:当父组件的属性变化时,将传导给子组件,但是不会反过来。
 
修改 props 数据
定义一个局部变量,并用 prop 的值初始化它。但是由于定义的 ownChildMsg 只能接受 forChildMsg 的初始值,当父组件要传递的值变化发生时,ownChildMsg 无法收到更新。
更加妥帖的方式是使用变量存储 prop 的初始值,并用 watch 来观察 prop 值得变化。发生变化时,更新变量的值。
 data() {
 return {
  ownChildMsg: this.forChildMsg
 };
 },
 watch: {
 forChildMsg() {
  this.ownChildMsg = this.forChildMsg;
 }
 }
 
对于绝大多数特性来说,从外部提供给组件的值会替换掉组件内部设置好的值。所以如果传入 type="text" 就会替换掉 type="date" 并把它破坏!庆幸的是,class 和 style 特性会稍微智能一些,即两边的值会被合并起来,从而得到最终的值。
 
如果你不希望组件的根元素继承特性,你可以在组件的选项中设置 inheritAttrs: false

vue的prop父子组件传值的更多相关文章

  1. vue父子组件传值加例子

    例子:http://element-cn.eleme.io/#/zh-CN/component/form         上进行改的 父传子:用prop:子组件能够改变父组件的值,是共享的,和父操作是 ...

  2. vue 非父子组件传值

    /*非父子组件传值 1.新建一个js文件 然后引入vue 实例化vue 最后暴露这个实例 2.在要广播的地方引入刚才定义的实例 3.通过 VueEmit.$emit('名称','数据') 4.在接收收 ...

  3. 【vue】父组件主动调用子组件 /// 非父子组件传值

    一  父组件主动调用子组件: 注意:在父组件使用子组件的标签上注入ref属性,例如: <div id="home"> <v-header ref="he ...

  4. Vue中非父子组件传值的问题

    父子组件传值的问题,前面已经讲过,不再叙述,这里来说一种非父子组件的传值. vue官网指出,可以使用一个空vue实例作为事件中央线! 也就是说 非父子组件之间的通信,必须要有公共的实例(可以是空的), ...

  5. Vue非父子组件传值

    <template> <div id="app"> <v-home></v-home> <br> <hr> ...

  6. 关于Vue父子组件传值(复杂数据类型的值)的细节点

    vue 父子组件传值是很常见的,多数情况下都是父传递给子的值是基础数据类型,如string,number,boolean, 当父组件值被修改时,子组件能够实时的作出改变. 如果父子传值的类型是复杂数据 ...

  7. 一个故事讲懂vue父子组件传值

    作者:李佳明同学链接:https://www.jianshu.com/p/2272b6ca0f0c 一个故事讲懂vue父子组件传值 讲故事前先讲代码 父组件向子组件传值 父组件数据传递给子组件可以通过 ...

  8. Vue组件传值(二)之 非父子组件传值

    Vue中非父子组件之间是如何实现通信的? 本章主要讲的是非父子组件传值,父子组件传值请看上一篇文章. 1.创建新的Vue实例引入项目中,通过$emit.$on来实现非父子组件传值: 1 <!DO ...

  9. 【Vue】Vue中的父子组件通讯以及使用sync同步父子组件数据

    前言: 之前写过一篇文章<在不同场景下Vue组件间的数据交流>,但现在来看,其中关于“父子组件通信”的介绍仍有诸多缺漏或者不当之处, 正好这几天学习了关于用sync修饰符做父子组件数据双向 ...

随机推荐

  1. hdoj3586 (树形dp)

    题目链接:https://vjudge.net/problem/HDU-3586 题意:一棵边权树,要删掉一些边使得每个叶子结点不能到达树根,且这些边的权值<=上限Max,且边权和小于m,求最小 ...

  2. jdk1.8 Maven 的安装教程

    1.下载java1.8    URL:    http://www.oracle.com/technetwork/java/javase/downloads/jdk8-downloads-213315 ...

  3. springboot+mybatis 用redis作二级缓存

    1.加入相关依赖包: <?xml version="1.0" encoding="UTF-8"?> <project xmlns=" ...

  4. (十二)mybatis 查询缓存

    目录 什么是查询缓存 图解查询缓存 一级缓存 二级缓存 禁用二级缓存 刷新缓存 二级缓存应用场景 二级缓存局限性 什么是查询缓存 mybatis 在查询数据的时候,会将数据存储起来,下次再次查询相同的 ...

  5. idea插件,配置

    1.插件 2.配置 1.去除double shift 全局搜索的功能,反正不符合我的习惯 Help -> Find Action  搜索 registry ,勾选 double.click.ha ...

  6. C结构体与JavaBean转化

    1 概述 (1)项目开发过程可能涉及多种语言,而多种语言之间如何数据交换格式是多种多样的,比如说:Java和JavaScript可以用json,Java和C#可以用xml等等. (2)这里提供一种C与 ...

  7. C# 将一种类型的数组转化为另一种类型的数组

    //字符串数组(源数组) "}; //整型数组(目标数组) int[] iNums; //转换方法 iNums = Array.ConvertAll<string, int>(s ...

  8. windows phone 下拉刷新

    在windows phone 中采用数据列表时为了保证用户体验常遇到加载数据的问题.这个问题普遍到只要你用到数据列表就要早晚面对这个问题. 很多人会说这个问题已经有解决方案. 其实真正问题并不在于如何 ...

  9. vue 通过 name 和 params 进行调整页面传参刷新参数丢失问题&vue路由可选参数

    vue  通过 name 和 params 进行调整页面传参刷新参数丢失问题 router.js: export default new Router({ routes: [ { path: '/', ...

  10. poi的基本导入

    一.获取列的值 private String getCell(Cell cell){ if(null == cell){ return ""; } try{ cell.setCel ...