1. <!DOCTYPE html>
  2. <html lang="en">
  3. <head>
  4.     <meta charset="UTF-8">
  5.     <title>Title</title>
  6. </head>
  7. <body>
  8. <div id="app">
  9.  
  10. </div>
  11. </body>
  12. <script src="node_modules/vue/dist/vue.js"></script>
  13. <script>
  14.     //组件之间的通讯 ，1，父与子 2，子与父 3，兄弟之间
  15.     // 父亲传递儿子，默认组件是独立的，相互不能引用数据，可以通过属性方式传递给儿子
  16.     let vm=new Vue({
  17.         el:"#app",
  18.         //根实例上的data都是对象，组件中的都是函数
  19.         data:{
  20.             money:100
  21.         },
  22.         //父级传递给子集数据通过绑定属性,如果传递多个可以数组中写多个
  23.         //如果传递的是boolean或这个数组需要加:
  24.         //template会替代div，id为app的标签
  25.         template:'<div><child :m="money" o="美女"></child></div>',
  26.  
  27.         components: {
  28.             child: {
  29.                 //子集接收给父级给的数据，通过props属性接收
  30.                 props: {
  31.                     //规定传递过来的m是不符合数组里面类型，也会渲染页面上，只是提示
  32.                     m: {
  33.                         type: [Number, Boolean, Array, String],
  34.                         // default:'500' //默认值，如果父级没有传递时候，会采用默认值
  35.                         required: true ////必须传递 不能和default同时引用
  36.                     },
  37.                     o: {
  38.                         type: String,
  39.                         //自定义校验器
  40.                         validator(val) { //val代表o属性传递过来的值
  41.                             return val === '美女';
  42.                         }
  43.                     }
  44.                     },
  45.                     computed: {
  46.                         b() {
  47.                             //这里的this指向子集child
  48.                             //父亲的数据儿子不能更改 错误写法 this.o="丑呀"
  49.                             return "大大" + this.o;
  50.                         }
  51.                     },
  52.                     template: "<div>儿子 {{m}} {{b}}</div>"
  53.                 }
  54.             }
  55.     });
  56. </script>
  57. </html>

vue.js组件之间的通讯-----父亲向儿子传递数据，儿子接收父亲的数据的更多相关文章

  1. vue.js组件之间通讯的数据双向绑定----父亲把数据传递给儿子，儿子更改数据后，重新发送给父亲，父亲数据更改后，属性会重新发送个儿子，儿子刷新新数据

    vue组件是相互独立的,如果要交互通讯,这时候,就需要组件之间数据互通了 往常我们讲的都是数据传递,子传父,父传子,都没有说子和父,父与子之间的数据互通 父亲传递给儿子数据,儿子触发一个父亲方法,将最 ...

  2. vue.js组件之间通讯--父组件调用子组件的一些方法，子组件暴露一些方法，让父组件调用

    <!DOCTYPE html><html lang="en"><head> <meta charset="UTF-8" ...

  3. vue.js 组件之间传递数据

    前言 组件是 vue.js 最强大的功能之一,而组件实例的作用域是相互独立的,这就意味着不同组件之间的数据无法相互引用.如何传递数据也成了组件的重要知识点之一. 组件 组件与组件之间,还存在着不同的关 ...

  4. Vue父子组件之间的通讯（学习笔记）

    <!DOCTYPE html> <html lang="en"> <head> <meta charset="UTF-8&quo ...

  5. Vue.js组件之间的通信

    导语:组件之间的关系不外乎两种, 父子组件和非父子组件,本文将对两类组件之间的通信方式进行详细阐述. 父子组件间的通信 通信方式1(单向绑定): Props down, Events up (建议使用 ...

  6. Vue.js组件之间的调用

    index.html: <div id="app"></div> 运行完index.html之后自动寻找运行main.js文件 main.js: impor ...

  7. vue入坑教程（三）vue父子组件之间互相调用方法以及互相传递数据

    1.父组件调用子组件的方法 父组件: <template> <div> <button v-on:click="clickParent">点击& ...

  8. vue.js组件之j间的通讯一 子组件接受父祖件数据

    Vue2.0的三种常用传值方式.父传子.子传父.非父子组件传值 在Vue的框架开发的项目过程中,经常会用到组件来管理不同的功能,有一些公共的组件会被提取出来.这时必然会产生一些疑问和需求?比如一个组件 ...

  9. 组件之间的通讯：vuex状态管理,state,getters,mutations,actons的简单使用（一）

    之前的文章中讲过,组件之间的通讯我们可以用$children.$parent.$refs.props.data... 但问题来了,假如项目特别大,组件之间的通讯可能会变得十分复杂... 这个时候了我们 ...

随机推荐

  1. bzoj 1628: [Usaco2007 Demo]City skyline【贪心+单调栈】

    还以为是dp呢 首先默认答案是n 对于一个影子,如果前边的影子比它高则可以归进前面的影子,高处的一段单算: 和他一样高的话就不用单算了,ans--: 否则入栈 #include<iostream ...

  2. SQL 增加, 删除父子级带事务的存储过程

    if (object_id('proc_DeleteFile', 'P') is not null)    drop proc proc_DeleteFile gocreate  PROCEDURE ...

  3. BFS(倒水问题) HDU 1495 非常可乐

    题目传送门 /* BFS:倒水问题,当C是奇数时无解.一共有六种情况,只要条件符合就入队,我在当该状态vised时写了continue 结果找了半天才发现bug,泪流满面....(网上找份好看的题解都 ...

  4. 树形DP Codeforces Round #135 (Div. 2) D. Choosing Capital for Treeland

    题目传送门 /* 题意:求一个点为根节点,使得到其他所有点的距离最短,是有向边,反向的距离+1 树形DP:首先假设1为根节点,自下而上计算dp[1](根节点到其他点的距离),然后再从1开始,自上而下计 ...

  5. js实现水波纹背景

    <!DOCTYPE html> <html> <head> <title>水波背景</title> <meta charset=&qu ...

  6. [转]oracle 同义词 synonym

    本文转自:http://blog.csdn.net/generalfu/article/details/7906561 同义词定义 当一个用户想访问另外一个用户的表时, 需要在表前加用户名,总加表名不 ...

  7. 面向过程与面向对象引入三大特性&&事务

    1.面向过程 int a = 10;int b =5;int c = a+b; int r1 = 10;int r2 = 5;double c = r1*r1*3.14 - r2*r2*3.14 缺点 ...

  8. Android学习笔记（四） JAVA基础知识回顾

    一.接口 1)接口中定义的方法都是public权限,并且默认为public,而不是default. 2)接口的实现(implements)是特殊的继承,类似于父类子类的关系,可以向上转型(非常重要). ...

  9. python生成动态个性二维码

    1 安装工具2 生成普通二维码3 带图片的二维码4 动态 GIF 二维码5 在Python程序中使用 一.安装 首先在python环境下运行, 打开cmd进入python27 进入scripts 然后 ...

  10. Windows下80端口被进程System&PID=4占用的解决方法

    我的占用原因是 SQL Server Reporting Services,停止掉这个服务并设置其为手动启动即可 如果你并没有安装 SQL Server,请参考下文解决 =============== ...