vue.js组件之间的通讯-----父亲向儿子传递数据，儿子接收父亲的数据
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<title>Title</title>
</head>
<body>
<div id="app"> </div>
</body>
<script src="node_modules/vue/dist/vue.js"></script>
<script>
//组件之间的通讯 ，1，父与子 2，子与父 3，兄弟之间
// 父亲传递儿子，默认组件是独立的，相互不能引用数据，可以通过属性方式传递给儿子
let vm=new Vue({
el:"#app",
//根实例上的data都是对象，组件中的都是函数
data:{
money:100
},
//父级传递给子集数据通过绑定属性,如果传递多个可以数组中写多个
//如果传递的是boolean或这个数组需要加:
//template会替代div，id为app的标签
template:'<div><child :m="money" o="美女"></child></div>', components: {
child: {
//子集接收给父级给的数据，通过props属性接收
props: {
//规定传递过来的m是不符合数组里面类型，也会渲染页面上，只是提示
m: {
type: [Number, Boolean, Array, String],
// default:'500' //默认值，如果父级没有传递时候，会采用默认值
required: true ////必须传递 不能和default同时引用
},
o: {
type: String,
//自定义校验器
validator(val) { //val代表o属性传递过来的值
return val === '美女';
}
}
},
computed: {
b() {
//这里的this指向子集child
//父亲的数据儿子不能更改 错误写法 this.o="丑呀"
return "大大" + this.o;
}
},
template: "<div>儿子 {{m}} {{b}}</div>"
}
}
});
</script>
</html>
vue.js组件之间的通讯-----父亲向儿子传递数据，儿子接收父亲的数据的更多相关文章
- vue.js组件之间通讯的数据双向绑定----父亲把数据传递给儿子，儿子更改数据后，重新发送给父亲，父亲数据更改后，属性会重新发送个儿子，儿子刷新新数据
vue组件是相互独立的,如果要交互通讯,这时候,就需要组件之间数据互通了 往常我们讲的都是数据传递,子传父,父传子,都没有说子和父,父与子之间的数据互通 父亲传递给儿子数据,儿子触发一个父亲方法,将最 ...
- vue.js组件之间通讯--父组件调用子组件的一些方法，子组件暴露一些方法，让父组件调用
<!DOCTYPE html><html lang="en"><head> <meta charset="UTF-8" ...
- vue.js 组件之间传递数据
前言 组件是 vue.js 最强大的功能之一,而组件实例的作用域是相互独立的,这就意味着不同组件之间的数据无法相互引用.如何传递数据也成了组件的重要知识点之一. 组件 组件与组件之间,还存在着不同的关 ...
- Vue父子组件之间的通讯（学习笔记）
<!DOCTYPE html> <html lang="en"> <head> <meta charset="UTF-8&quo ...
- Vue.js组件之间的通信
导语:组件之间的关系不外乎两种, 父子组件和非父子组件,本文将对两类组件之间的通信方式进行详细阐述. 父子组件间的通信 通信方式1(单向绑定): Props down, Events up (建议使用 ...
- Vue.js组件之间的调用
index.html: <div id="app"></div> 运行完index.html之后自动寻找运行main.js文件 main.js: impor ...
- vue入坑教程（三）vue父子组件之间互相调用方法以及互相传递数据
1.父组件调用子组件的方法 父组件: <template> <div> <button v-on:click="clickParent">点击& ...
- vue.js组件之j间的通讯一 子组件接受父祖件数据
Vue2.0的三种常用传值方式.父传子.子传父.非父子组件传值 在Vue的框架开发的项目过程中,经常会用到组件来管理不同的功能,有一些公共的组件会被提取出来.这时必然会产生一些疑问和需求?比如一个组件 ...
- 组件之间的通讯：vuex状态管理,state,getters,mutations,actons的简单使用（一）
之前的文章中讲过,组件之间的通讯我们可以用$children.$parent.$refs.props.data... 但问题来了,假如项目特别大,组件之间的通讯可能会变得十分复杂... 这个时候了我们 ...
随机推荐
- SAP基本搜索帮助及增强出口
se11创建基本搜索帮助时,各个参数的含意 选择方法 指定命中列表的数据来源,可以是数据库表,视图,CDS.如果指定了搜索帮助出口函数则该字段可以不输,数据来源可以在出口中自行指定 对话类型: 输 ...
- SSH协议、HTTPS中SSL协议的完整交互过程
1.(SSH)公私钥认证原理 服务器建立公钥:每一次启动sshd服务时,该服务会主动去找/etc/ssh/ssh_host*的文件 客户端通过ssh工具进行连接,如Xshell,SecureCRT 服 ...
- [C++ STL] 迭代器（iterator）详解
背景:指针可以用来遍历存储空间连续的数据结构,但是对于存储空间非连续的,就需要寻找一个行为类似指针的类,来对非数组的数据结构进行遍历.因此,我们引入迭代器概念. 一.迭代器(iterator)介绍 ...
- Oracle 参考脚本
一.创建物化视图 --新建表空间 CREATE TABLESPACE MLOG_TBS LOGGING DATAFILE 'mlog_tbs.dbf' SIZE 32M AUTOEXTEND ON N ...
- 为 C# 代码生成 API 文档（自译）
原文地址:http://broadcast.oreilly.com/2010/09/build-html-documentation-for-y.html#comments Sandcastle 功能 ...
- 375 Guess Number Higher or Lower II 猜数字大小 II
我们正在玩一个猜数游戏,游戏规则如下:我从 1 到 n 之间选择一个数字,你来猜我选了哪个数字.每次你猜错了,我都会告诉你,我选的数字比你的大了或者小了.然而,当你猜了数字 x 并且猜错了的时候,你需 ...
- 关于java中replace的用法
今天突然看到Java中的replace有两种方法,一种是直接替换,另一种是可以进行匹配替换的方式: public String replace(CharSequence target, CharSeq ...
- 获取Spring容器中的Bean协助调试
在使用Spring进行开发时,有时调bug真的是很伤脑筋的一件事,我们可以通过自定义一个监听器来获取Spring容器中的Bean实例来协助我们调试. 第一步:编写自定义监听器 /** * 监听serv ...
- BPI-MI1刷Andorid的启动卡之后上网的步骤（以太网&&WIFI）
BPI-MI1刷Andorid的启动卡之后上网的步骤(以太网&&WIFI) 2017/9/19 16:57 01刷Android的默认启动界面.png 02打开英文模式下的设置Sett ...
- Java 基础入门随笔（5） JavaSE版——函数重载
1.函数 函数就是定义在类中具有特定功能的一段独立小程序,也称为方法. 定义函数的格式: 修饰符 返回值类型 函数名(参数类型 形式参数1,参数类型 形式参数2,...) { ...