Vue组件父子间通信01
子组件传递数据 用户已经登录
父组件接收数据 并显示列表，未登录不显示列表
/*
有两个组件，分别是main-component,header-component.
main-component是由header-component和一个列表（有5条数据 [100,200,300,400,500]），
header-component是由一个h1的标签：'这是页头',有一个数据isUserLogin:true
在渲染main-component时候，读取header-component在挂载完毕之后通过事件传递来的数据（isUserLogin），根据该数据的真假来决定列表是否显示.
<child-component @myEvent="recvMsg">
</child-component>
this.$emit('myEvent',myPhone)
*/
<!doctype html>
<html>
<head>
<meta charset="UTF-8">
<title>子与父通信</title>
<script src="js/vue.js"></script>
</head>
<body>
<div id="container">
<p>{{msg}}</p>
<main-component></main-component>
</div>
<script> //创建父组件
Vue.component("main-component",{
data:function(){
return{
myList:[1,2,3,4,5],
isUserLogin:true
}
},
methods:{
recvMsg:function(msg){
this.isUserLogin = msg;
}
},
template:`
<div>
<header-component @checkUserLogin="recvMsg"></header-component>
<ul v-if="isUserLogin">
<li v-for="tmp in myList">{{tmp}}</li>
</ul>
</div>`
})
//创建子组件
Vue.component("header-component",{
//data属性中保存用户已经登录
data:function(){
return{
isLogin:false
}
},
//通过$emit在挂载完成后把用户已经登录的值发传递给父组件
mounted:function(){
this.$emit("checkUserLogin",this.isLogin);
},
template:`
<div>
<h1>这是页头</h1>
</div>
`
})
// new一个vue实例
new Vue({
el:"#container",
data:{
msg:"Hello VueJs"
}
})
</script>
</body>
</html>
Vue组件父子间通信01的更多相关文章
- vue组件父子间通信之综合练习--假的聊天室
<!doctype html> <html> <head> <meta charset="UTF-8"> <title> ...
- vue组件父子间通信02
三.组件间通信($parent $refs) 父组件要想获取子组件的数据:①在调用子组件的时候,指定ref属性<child-component ref="mySon"> ...
- 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 ...
随机推荐
- js函数调用的几种方法
js的函数调用会免费奉送两个而外的参数就是 this 和 arguments .arguments是参数组,他并不是一个真实的数组,但是可以使用.length方法获得长度. 书上有说4中调用方式: 方 ...
- 使用Medusa美杜莎暴力破解SSH密码
使用Medusa美杜莎暴力破解SSH密码 1.Medusa简介 Medusa(美杜莎)是一个速度快,支持大规模并行,模块化的爆力破解工具.可以同时对多个主机,用户或密码执行强力测试.Medusa和hy ...
- linux中查找文件
locate arm-none-linux-gnueabi-gcc//有效 find / -name "arm-none-linux-gnueabi-gcc"
- 二进制sersync部署安装
一.为什么要用rsync+sersync架构? 1.sersync是基于inotify开发的,类似于inotify-tools的工具 2.sersync可以记录下被监听目录中发生变化的(包括增加.删除 ...
- vue-jwt 实战
作用:把用户的信息储存到客户端 每次客户端带上token 校验是否登陆过 1.使用主要有两个api jwt.sign(payload, secretOrPrivateKey, [options, ca ...
- 阅读《Effective Java》每条tips的理解和总结（2）（持续更新）
15. 使类和成员的可访问性最小化 一个好用的类的属性必须要隐藏起来,干净的将它与类的api分离开来,类之间只通过api相互使用,降低他们之间的耦合性.为了做到这一点,建议根据情况选择尽可能低的访问级 ...
- RPC协议解析
RPC(Remote Procedure Call Protocol)远程过程调用协议,它是一种通过网络从远程计算机程序上请求服务,而不需要了解底层网络技术的协议.简言之,RPC使得程序能够像访问本地 ...
- Spring快速复习和总结
IOC:管理和启动的java类的权力反转到了Spring容器了: 具体说明:Spring容器将配置好的bean放到容器(通过beanfactory,这是一个接口)中,并开始启动(反射)和调用(反射)和 ...
- postman-关联
1.提取 在Tests提取接口1的值如:userid //将获取的json数据赋给变量 var jsonData=pm.response.json(); //获取返回的userid值 user_id= ...
- php实现大视频上传
本人在2010年时使用swfupload为核心进行文件的批量上传的解决方案.见文章:WEB版一次选择多个文件进行批量上传(swfupload)的解决方案. 本人在2013年时使用plupload为核心 ...