vue组件父子间通信02
三、组件间通信（$parent $refs）
父组件要想获取子组件的数据：
①在调用子组件的时候，指定ref属性
<child-component ref="mySon"></child-component>
②根据指定的引用的名字 找到子组件的实例对象
this.$refs.mySon
子组件要想获取父组件的数据：
①直接读取
this.$parent
：：：通过this.$refs拿到子组件的数据
<!doctype html>
<html>
<head>
<meta charset="UTF-8">
<title>组件间通信-01</title>
<script src="js/vue.js"></script>
</head>
<body>
<div id="container">
<p>{{msg}}</p>
<dahua></dahua>
</div>
<script>
//vue提供的ref
Vue.component("dahua",{
data:function(){
return{
mySonName:""
}
},
methods:{
//通过$refs拿到指定的所引用的对应的组件的实例对象
getSonName:function(){
this.mySonName = this.$refs.mySon.name;
}
},
template:`
<div>
<h1>这是父组件</h1>
<button @click = "getSonName">获取子组件数据</button>
<span>{{mySonName}}</span>
<hr>
<xiaohua ref="mySon"></xiaohua>
</div>
`
})
// 创建子组件
Vue.component("xiaohua",{
data:function(){
return{
name:"小花"
}
},
template:`
<h1>这是子组件</h1>
`
})
new Vue({
el:"#container",
data:{
msg:"Hello VueJs"
}
})
</script>
</body>
</html>
子组件通过$parent获取父组件的数据
<!doctype html>
<html>
<head>
<meta charset="UTF-8">
<title>组件间通信-02</title>
<script src="js/vue.js"></script>
</head>
<body>
<div id="container">
<p>{{msg}}</p>
<dahua></dahua>
</div>
<script>
//创建子组件
Vue.component("dahua",{
data:function(){
return{
myName:"大花"
}
},
template:`
<div>
<h1>这是父组件</h1>
<hr>
<xiaohua></xiaohua>
</div>
`
})
//创建子组件
Vue.component("xiaohua",{
data:function(){
return{
msg:""
}
},
template:`
<div>
<h1>这是子组件</h1>
<p>{{msg}}</p>
</div>
`,
created:function(){
//在子组件创建完成时获取父组件的数据
//保存在msg中在p标签中显示
this.msg = this.$parent.myName;
}
})
new Vue({
el:"#container",
data:{
msg:"Hello VueJs"
}
})
</script>
</body>
</html>
vue组件父子间通信02的更多相关文章
- vue组件父子间通信之综合练习--假的聊天室
<!doctype html> <html> <head> <meta charset="UTF-8"> <title> ...
- Vue组件父子间通信01
子组件传递数据 用户已经登录 父组件接收数据 并显示列表,未登录不显示列表 /* 有两个组件,分别是main-component,header-component.main-component是由he ...
- Vue组件实例间的直接访问
前面的话 有时候需要父组件访问子组件,子组件访问父组件,或者是子组件访问根组件. 在组件实例中,Vue提供了相应的属性,包括$parent.$children.$refs和$root,这些属性都挂载在 ...
- vuex-- Vue.的中心化状态管理方案（vue 组件之间的通信简化机制）
vuex-- Vue.的中心化状态管理方案(vue 组件之间的通信简化机制) 如果你在使用 vue.js , 那么我想你可能会对 vue 组件之间的通信感到崩溃 .vuex就是为了解决组件通信问题的. ...
- vue组件之间的通信， 父子组件通信，兄弟组件通信
组件通讯包括:父子组件间的通信和兄弟组件间的通信.在组件化系统构建中,组件间通信必不可少的. 父组件--> 子组件 1. 属性设置 父组件关键代码如下: <template> < ...
- vue组件之间的通信，父子之间的数据通信
父子组件之间的通信问题既可以传递数据也可以传递变量,父组件传递数据给子组件可以使用props,子组件传递数据给父组件则可以自定义函数来监听子组件的事件发射器. 首先说说组件注册,组件的注册分为全局注册 ...
- vue父子间通信案列三($emit和prop用法)
<!DOCTYPE html> <html lang="en"> <head> <meta charset="UTF-8&quo ...
- vue父子间通信
父组件是通过props属性给子组件通信的来看下代码: 父组件: <parent> <child :child-com="content"></chil ...
- vue组件之间的通信
1.父组件给子组件传递数据 <body> <div id="app"> 父组件:{{total}} <br> <son-component ...
随机推荐
- webpack output的path publicPath
path是用来定义入口文件保存的地址,而publicPath是定义非入口文件需要抽离保存的第三方文件的保存地址 vue-cli 中HtmlWebpackPlugin生成html,都会存在path路径上 ...
- maven项目pom.xml报错： Failure to transfer org.apache.maven.plugins:maven-surefire-plugin:pom:2.7.1 from
转自:https://blog.csdn.net/wolf1213hao/article/details/53413093
- 前端之JQuery：JQuery基本语法
jQuery基本语法 一.jQuery基础1.为什么要用jquery? 写起来简单,省事,开发效率高,兼容性好2.什么是jQuery? jQuery是一个兼容多浏览器的JavaScript库(类似py ...
- 《扩展和嵌入python解释器》1.4 模块方法表和初始化函数
<扩展和嵌入python解释器>1.4 模块方法表和初始化函数 1.4 模块方法表和初始化函数 下面,我演示如何从Python程序调用spam_system().首先,我们需要在’方法 ...
- vue开发移动端总结
1.app.vue组件中,外层只能有一个div块,不能多个并列在一起. 正确: 错误: 2.main.js文件 3. app.vue文件 4. stroe.js 文件 5. router.js
- Java 8 Date常用工具类
原创转载请注明出处:https://www.cnblogs.com/agilestyle/p/11983108.html Demo package org.fool.util; import java ...
- react native 之 AsyncStorage
新版本中不时从react-native导入了,而是 react-native-async-storage 使用static setItem(key: string, value: string, [c ...
- MySQL 数据库慢查询日志分析脚本
这个脚本是基于pt-query-digest做的日志分析脚本,变成可视化的格式. 目录结构是 ./mysql_data/log./mysql_data/log/tmp./slow_query # co ...
- select下拉框数据回显
前台页面 <select class="select" name="operatorId" id="operatorId" style ...
- Kaggle 房价预测问题参考资料
作者的 Kaggle 主页:https://www.kaggle.com/pavansanagapati Tutorial - Housing Prices Model Prediction http ...