<!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用法)的更多相关文章

  1. vue父子间通信

    父组件是通过props属性给子组件通信的来看下代码: 父组件: <parent> <child :child-com="content"></chil ...

  2. vue组件父子间通信之综合练习--假的聊天室

    <!doctype html> <html> <head> <meta charset="UTF-8"> <title> ...

  3. vue组件间通信六种方式（完整版）

    本文总结了vue组件间通信的几种方式,如props. $emit/ $on.vuex. $parent / $children. $attrs/ $listeners和provide/inject,以 ...

  4. Vue组件间通信6种方式

    摘要: 总有一款合适的通信方式. 作者:浪里行舟 Fundebug经授权转载,版权归原作者所有. 前言 组件是 vue.js 最强大的功能之一,而组件实例的作用域是相互独立的,这就意味着不同组件之间的 ...

  5. vue 父子组件通信

    算是初学vue,整理一下父子组件通信笔记. 父组件通过 prop 给子组件下发数据,子组件通过事件给父组件发送消息. 一.父组件向子组件下发数据: 1.在子组件中显式地用props选项声明它预期的数据 ...

  6. Vue父子组件通信（父级向子级传递数据、子级向父级传递数据、Vue父子组件存储到data数据的访问）

    Vue父子组件通信(父级向子级传递数据.子级向父级传递数据.Vue父子组件存储到data数据的访问) 一.父级向子级传递数据[Prop]: ● Prop:子组件在自身标签上,使用自定义的属性来接收外界 ...

  7. vue组件父子间通信02

    三.组件间通信($parent $refs) 父组件要想获取子组件的数据:①在调用子组件的时候,指定ref属性<child-component ref="mySon"> ...

  8. vue父子组件通信

    一.父子组件间通信 vue.js 2.0提供了一个ref 的属性: 可以为子组件指定一个索引id 父组件: <template> <div id='user-login'> & ...

  9. vue组件间通信

    组件间通信(父子,兄弟) 相关链接\组件通信http://www.cnblogs.com/xulei1992/p/6121974.html 学习链接Vue.js--60分钟快速入门http://www ...

随机推荐

  1. Java 学习（11）： 面向对象编程—继承（super，this）

    Java 继承 what: 继承就是子类继承父类的特征和行为,使得子类对象(实例)具有父类的实例域和方法,或子类从父类继承方法,使得子类具有父类相同的行为.子类从它的父类中继承可访问的数据域和方法,也 ...

  2. HDU——T 1068 Girls and Boys

    http://acm.hdu.edu.cn/showproblem.php?pid=1068 Time Limit: 20000/10000 MS (Java/Others)    Memory Li ...

  3. C内存管理一 概述

    我们写了这么多年的程序猿.可能理论方面还比不上大学生.有人 "嘘"我了,假设有能回答下面几个问题的同学请举手: 1.面试常常遇到:同学请说说堆栈的差别? 2.同学请说说一个函数在堆 ...

  4. sklearn 词袋 CountVectorizer

    from sklearn.feature_extraction.text import CountVectorizer texts=["dog cat fish","do ...

  5. 配置ssh免密码登录的原理

  6. jsp输出当前时间

    在jsp页面中输出完整的时间,格式为"年 月 日  时:分:秒" <% Date date = new Date(); SimpleDateFormat t = new Si ...

  7. 在cncc的最后几天的笔记

    数据库范式:http://blog.csdn.net/fg2006/article/details/6936439 数据库事务隔离级别:http://blog.csdn.net/fg2006/arti ...

  8. zookeeper启动闪退

    编辑zkServer.cmd在它的尾行加上 pause      就可以将闪退停住来观察闪退的原因. 遇到Exception in thread "main" java.lang. ...

  9. Debian9.5下sftp配置和scp用法

    基于 ssh 的 sftp 服务相比 ftp 有更好的安全性(非明文帐号密码传输)和方便的权限管理(限制用户的活动目录). 1.如果只想让某些用户只能使用 sftp 操作文件, 而不能通过ssh进行服 ...

  10. 临时的js方法

    //楼层的js var scroChange; //楼层跳转 function FloorGo(domId){//传入目标的id clearInterval(scroChange); var scro ...