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 ...
随机推荐
- 掌握Spark机器学习库-06-基础统计部分
说明 本章主要讲解基础统计部分,包括基本统计.假设检验.相关系数等 数据集 数据集有两个文件,分别是: beijing.txt 北京历年降水量,不带年份 beijing2.txt 北京历年降水量,带年 ...
- R Programming week1-Data Type
Objects R has five basic or “atomic” classes of objects: character numeric (real numbers) integer co ...
- linux下mysql开启可访问
修改mysql配置连接信息 将bind-address注释 vim /etc/my.cnf 修改mysql用户授权 mysql>GRANT ALL PRIVILEGES ON *.* TO ' ...
- windows上把git生成的ssh key
右键鼠标,选中 “Git Bash here”: 输入指令,创建ssh key: cd ~/.ssh/ #bash: cd: /c/Users/Administrator/.ssh/: No such ...
- Boost库编译安装
一.Boost库介绍 Boost库是一个经过千锤百炼.可移植.提供源代码的C++库,作为标准库的后备,是C++标准化进程的发动机之一.Boost库由C++标准委员会库工作组成员发起,其 ...
- vue脚手架工具vue-cli
一.什么 是脚手架工具vue-cli? 类似于工人手里面的脚手架一样,帮助工人搭架子用,同样的vue脚手架工具也是帮助我们更好更快速的开发代码的工具 二.vue-cli能做什么? 三.vue-cli安 ...
- rsync 同步多台服务器项目目录
server1:192.168.10.1server2:192.168.10.2实现server2实时同步server1的数据! ###############server1############# ...
- vs2008如何新建自己工程的环境变量（局部）和 Windows系统（全局）. .
在vs2008的Project->Property设置里经常会看到类似$(IntDir).$(OutDir).$(ProjectName) 的预定义宏.以vc2008为例,有时候我们在引用别的库 ...
- 多线程之Java中的等待唤醒机制
多线程的问题中的经典问题是生产者和消费者的问题,就是如何让线程有序的进行执行,获取CPU执行时间片的过程是随机的,如何能够让线程有序的进行,Java中提供了等待唤醒机制很好的解决了这个问题! 生产者消 ...
- android-async-http框架库使用基础
开源项目链接 android-async-http仓库:git clone https://github.com/loopj/android-async-http android-async-http ...