Vue.js父子通信之所有方法和数据共享
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<title>parentChildComponent</title>
<script src="js/vue.js"></script>
<template id="parent">
<div>
I am parent component !{{msg}};I accept :{{msg2}}
<hr>
<child ref="child"></child>
</div>
</template>
<template id="child">
<div>
I am child component !{{msg}};I accept :{{msg2}}
</div>
</template>
</head>
<body>
<script>
window.onload=function(){
let child={
template:'#child',
data(){
return {
msg:'Data of child !',
msg2:''
}
},
mounted(){
this.msg2=this.$parent.msg;
}
};
let parent={
template:'#parent',
components:{
child
},
data(){
return {
msg:'Data of parent !',
msg2:''
}
},
mounted(){
this.msg2=this.$refs.child.msg
}
};
new Vue({
el:'#app',
components:{
parent
}
});
}
</script>
<div id="app">
<parent></parent>
</div>
</body>
</html>
打通父子之间所有数据和方法的共享：
父模板：<child ref="子名称"></child>
父访问子: 父组件: this.$refs.子名称.子数据/方法名()
子访问父: 子组件: this.$parent.子数据/方法名()
Vue.js父子通信之所有方法和数据共享的更多相关文章
- 【Vue课堂】Vue.js 父子组件之间通信的十种方式
这篇文章介绍了Vue.js 父子组件之间通信的十种方式,不管是初学者还是已经在用 Vue 的开发者都会有所收获.无可否认,现在无论大厂还是小厂都已经用上了 Vue.js 框架,简单易上手不说,教程详尽 ...
- Vue.js 父子组件之间通信的方式
Vue 父子组件之间的同学有一下几种方式: 1. props 2. $emit -- 组件封装用的比较多 3. .sync -- 语法糖 4. $attrs 和 $listeners -- 组件封装用 ...
- vue.js父子组件通信动态绑定
<!DOCTYPE html> <html> <head lang="en"> <meta charset="UTF-8&quo ...
- 关于vue.js父子组件数据传递
vue.js中使用props down,events up的原则进行父子组件间的通信,先来记录下props down,看个例子: <div id="app2"> < ...
- Vue.js 父子组件相互传递数据
父传子 : 子组件接收变量名=父组件传递的数据 如::f-cmsg="fmsg" 注意驼峰问题 子传父:@子组件关联的方法名 = 父组件接受的方法名 如:@func=" ...
- Vue.js父子组件如何传值 通俗易懂
父子组件传值原理图 一般页面的视图App.vue应为这样 一.父组件向子组件传值 1.创建子组件,在src/components/文件夹下新建一个Child.vue 2.Child.vue的中创建pr ...
- Vue devtool插件安装后无法使用，提示“vue.js not detected”的解决方法
vue devtool下载 极简插件 github vue devtool安装 点击谷歌浏览器箭头所指图标-更多工具-扩展程序 ①:直接将后缀为crx的安装包拖进下图区域即可自动安装 ② ...
- vue.js使用更简单的方法制作带删除功能的tooolist
今天复习了下vue.js,先做了个基本版的todolist,做完后自己想加个删除本项的按钮.一开始做没啥头绪了,试了试无果,查了一把后发现网上的那些方法真的是麻烦,自己动手丰衣足食,自己最后换了思路试 ...
- vue.js 源代码学习笔记 ----- 工具方法 option
/* @flow */ import Vue from '../instance/index' import config from '../config' import { warn } from ...
随机推荐
- spring 配置 shiro rememberMe
1.shiro 提供记住我的功能,当将form表单中name="rememberMe" 的value设为true或者登陆的token中.token.setRememberMe(tr ...
- quazip非静态成员。。错误
转载请注明出处:http://www.cnblogs.com/dachen408/p/7147155.html 问题:quazip非静态成员..错误 解决方案:quazip_global.h 第42 ...
- Farseer.net轻量级开源框架 中级篇：Cookies、Session、Request
导航 目 录:Farseer.net轻量级开源框架 目录 上一篇:Farseer.net轻量级开源框架 中级篇: 探究ORM(Mapping) 下一篇:Farseer.net轻量级开源框架 中级篇 ...
- DBUtils使用技巧
BbUtils(一) 结果集概览:http://www.cnblogs.com/myit/p/4269165.html DbUtils(二) 结果集实例:http://www.cnblogs.com/ ...
- Linux 的 Spinlock 在 MIPS 多核处理器中的设计与实现
引言 随着科技的发展,尤其是在嵌入式领域,高性能.低功耗的处理器成为众多厂商追逐的目标,但是由于技术和工艺的瓶颈,试图在单核处理器上达到这样的目标变得越发困难,于是人们提出了多核处理器的概念.多核处理 ...
- TCP/IP 协议分层
协议分层 可能大家对OSI七层模型并不陌生,它将网络协议很细致地从逻辑上分为了7层.但是实际运用中并不是按七层模型,一般大家都只使用5层模型.如下: 物理层:一般包括物理媒介,电信号,光信号等,主要对 ...
- spring springmvc 获取所有url
@Autowired private RequestMappingHandlerMapping handlerMapping; @Test public void getAllApi() { Map& ...
- bootstrap-table的一些基本使用及表内编辑的实现
最近工作需要接触了bootstrap-table 所以研究了一下,并做了笔记,红色位置要特别注意 前端主要使用了 jquery bootstrap-table bootstrap-edittable ...
- 216种Web安全颜色
216种Web安全颜色 全部 JavaScript HTML5 jQuery CSS EXT Ajax Web综合 界面设计 DWR 锁定老帖子 主题:216种Web安全颜色 精华帖 (0) :: ...
- thinkphp5中extend的使用？
1.创建处理数组的类ArrayList.php <?php /** * ArrayList实现类 * @author liu21st <liu21st@gmail.com> */ c ...