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 ...
随机推荐
- 面试题9-用两个栈来实现一个队列，完成队列的Push和Pop操作
题目 用两个栈来实现一个队列,完成队列的Push和Pop操作. 队列中的元素为int类型. 思路: 一个栈压入元素,而另一个栈作为缓冲,将栈1的元素出栈后压入栈2中 代码 import java.ut ...
- Tinking in Java ---Java的NIO和对象序列化
前面一篇博客的IO被称为经典IO,因为他们大多数都是从Java1.0开始就有了的:然后今天这篇博客是关于NIO的,所以的NIO其实就是JDK从1.4开始,Java提供的一系列改进的输入/输出处理的新功 ...
- MFC_简易文件管理器
练习_简易文件管理器 Edit1编辑框绑定变量,初始化内容 m_EditCtrl = L"D:\"; 添加List控件,属性设置report,OnInitDialog()函数里添加 ...
- day24-1 元类
目录 元类 类的组成 内置函数 exec() class关键字创建类原理 自定义元类控制类的创建 自定义元类控制类实例化 自定义元类后对象属性查找顺序 元类 在python中一切皆对象,name我们用 ...
- apropos - 在 whatis 数据库中查找字符串
总览 (SYNOPSIS) apropos keyword ... 描述 (DESCRIPTION) apropos 命令在一些特定的包含系统命令的简短描述的数据库文件里查找关键字, 然后把结果送到标 ...
- 08C++函数
函数 4.1 概述 一个较大的程序不可能完全由一个人从头至尾地完成,更不可能把所有的内容都放在一个主函数中.为了便于规划.组织.编程和调试,一般的做法是把一个大的程序划分为若干个程序模块(即程序文件) ...
- NET使用SuperSocket完成TCP/IP通信
1)为什么使用SuperSocket? 性能高,易上手.有中文文档,我们可以有更多的时间用在业务逻辑上,SuperSocket有效的利用自己的协议解决粘包 2)SuperSocket的协议内容? 命令 ...
- 查询SQLServer2005中某个数据库中的表结构、索引、视图、存储过程、触发器以及自定义函数
查询SQLServer2005中某个数据库中的表结构.索引.视图.存储过程.触发器以及自定义函数 2013-03-11 09:05:06| 分类: SQL SERVER|举报|字号 订阅 ( ...
- vue set方法
<!DOCTYPE html> <html lang="en"> <head> <meta charset="UTF-8 ...
- HDU - 2102 A计划（双层BFS）
题目: 可怜的公主在一次次被魔王掳走一次次被骑士们救回来之后,而今,不幸的她再一次面临生命的考验.魔王已经发出消息说将在T时刻吃掉公主,因为他听信谣言说吃公主的肉也能长生不老.年迈的国王正是心急如焚, ...