vue父子间通信案列三($emit和prop用法)
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<title>js测试父子之间通信</title>
<script type="text/javascript" src="lib/boot.js"></script>
<style>
.box{
width:100%;
max-width:640px;
margin:40px auto;
border:1px solid #ccc;
padding:20px;
}
</style>
</head>
<body>
<div id="app" v-cloak>
<!-- 定义 -->
<child :msg-data="msg" @child-get="getList" @child-cancel="clearList">
<slot="cs-slot"></slot>
</child>
</div>
<script>
var tx = function(){
// 父组件
var child = {
template:`
<div name="cs-slot">slot用法</div>
<div class="box">
<i-button @click="send">获取数据</i-button>
<i-button @click="cancel" type="primary">取消数据</i-button>
<div>
<ul>
<li v-for="item in msgData">名称：{{item.name}}---id：{{item.id}}</li>
</ul>
</div>
</div>
`,
props:['msgData'],//接收父传来的数据
methods:{
send:function(){
// 发送给父的方法
this.$emit('child-get','hellow kitty')
},
cancel:function(){
this.$emit('child-cancel','')
}
}
}
return new Vue({
el:'#app',
data:{
msg:[]
},
methods:{
getList:function(val){
console.log(val);
this.msg = [{name:'百度',id:'001'},{name:'百威',id:'002'},{name:'腾讯',id:'003'}];
},
clearList:function(){
this.msg = [];
}
},
components:{
child:child
}
})
}()
</script>
</body>
</html>
vue父子间通信案列三($emit和prop用法)的更多相关文章
- vue父子间通信
父组件是通过props属性给子组件通信的来看下代码: 父组件: <parent> <child :child-com="content"></chil ...
- vue组件父子间通信之综合练习--假的聊天室
<!doctype html> <html> <head> <meta charset="UTF-8"> <title> ...
- vue组件间通信六种方式（完整版）
本文总结了vue组件间通信的几种方式,如props. $emit/ $on.vuex. $parent / $children. $attrs/ $listeners和provide/inject,以 ...
- Vue组件间通信6种方式
摘要: 总有一款合适的通信方式. 作者:浪里行舟 Fundebug经授权转载,版权归原作者所有. 前言 组件是 vue.js 最强大的功能之一,而组件实例的作用域是相互独立的,这就意味着不同组件之间的 ...
- vue 父子组件通信
算是初学vue,整理一下父子组件通信笔记. 父组件通过 prop 给子组件下发数据,子组件通过事件给父组件发送消息. 一.父组件向子组件下发数据: 1.在子组件中显式地用props选项声明它预期的数据 ...
- Vue父子组件通信（父级向子级传递数据、子级向父级传递数据、Vue父子组件存储到data数据的访问）
Vue父子组件通信(父级向子级传递数据.子级向父级传递数据.Vue父子组件存储到data数据的访问) 一.父级向子级传递数据[Prop]: ● Prop:子组件在自身标签上,使用自定义的属性来接收外界 ...
- vue组件父子间通信02
三.组件间通信($parent $refs) 父组件要想获取子组件的数据:①在调用子组件的时候,指定ref属性<child-component ref="mySon"> ...
- vue父子组件通信
一.父子组件间通信 vue.js 2.0提供了一个ref 的属性: 可以为子组件指定一个索引id 父组件: <template> <div id='user-login'> & ...
- vue组件间通信
组件间通信(父子,兄弟) 相关链接\组件通信http://www.cnblogs.com/xulei1992/p/6121974.html 学习链接Vue.js--60分钟快速入门http://www ...
随机推荐
- WPF 列表自动换行
原文:WPF 列表自动换行 本文告诉大家如何在 ListView 或 ListBox 使用 WrapPanel 让里面的控件自动换行 在 WPF 可以通过修改 ItemsPanel 设置使用不同的 I ...
- 2015 Multi-University Training Contest 4 hdu 5336 XYZ and Drops
XYZ and Drops Time Limit: 3000/1500 MS (Java/Others) Memory Limit: 65536/65536 K (Java/Others)Tot ...
- Informatica环境搭建过程中一些问题-近期项目进了新人，在搭建环境中存在一些问题，之前都处理过一直没有整理，这次接着机会，把这些常见问题处理整理出来
一.Informatica9.5.1创建资源库出错找不到libpmora8.so 错误如下: Database driver event...Error occurred loading librar ...
- ActiveMQ安装部署(Windows)
JMS(Java Messaging Service)是Java平台上有关面向消息中间件的技术规范,它便于消息系统中的Java应用程序进行消息交换,并且通过提供标准的产生.发送.接收消息的接口简化企业 ...
- servlet3.0 @webfilter 过滤顺序
Servlet3.0之前Filter过滤的顺序是由用户在web.xml中配置的顺序决定的,如下会先执行encodingFilter,再执行filter1. <filter> <dis ...
- POJ 3254 Corn Fields 状态压缩DP （C++/Java）
id=3254">http://poj.org/problem? id=3254 题目大意: 一个农民有n行m列的地方,每一个格子用1代表能够种草地,而0不能够.放牛仅仅能在有草地的. ...
- AVEVA PDMS to DIALux
AVEVA PDMS to DIALux eryar@163.com Abstract. DIAL develops DIALux - the world's leading software f ...
- java基本数据类型复习
1.基本取值范围及对应封装器(参考:http://www.cnblogs.com/Free-Thinker/p/4573068.html): 简单类型 boolean byte char short ...
- jquery去重
<!DOCTYPE HTML> <html> <head> <meta charset="utf-8"> <title> ...
- centos 服务器配置注意项
Mysql 出现Table‘xxx’is read only问题 Mysql数据库在由Mssql数据库导入数据文件后出现“ERROR 1036 (HY000): Table 'xxxx' is rea ...