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 ...
随机推荐
- bytes、str与unicode
1.Python3字符序列的类型 bytes -> 原始的8位值(既字节) str -> Unicode字符 2.Python2字符序列的类型 str -> 原始的8位值(既字节) ...
- 【POJ 3714】Raid
[题目链接]:http://poj.org/problem?id=3714 [题意] 给你两类的点; 各n个; 然后让你求出2*n个点中的最近点对的距离; 这里的距离定义为不同类型的点之间的距离; [ ...
- 安卓安装提示：Android SDK requires Android Developer Toolkit version 21.1.0 or above. （错误解决方法）
安卓安装提示:Android SDK requires Android Developer Toolkit version 21.1.0 or above. (错误解决方法) 主要是因为版本号不正确 ...
- UI组件之AdapterView及其子类（四）Gallery画廊控件使用
听说 Gallery如今已经不使用了,API使用ViewPaper取代了,以后再学专研ViewPaper吧如今说说Gallery画廊,就是不停显示图片的意思 Gallery是用来水平滚动的显示一系列项 ...
- iOS 报错:(子线程中更新UI)This application is modifying the autolayout engine from a background thread after the engine was accessed from the main thread. This can lead to engine corruption and weird crashes.
今天在写程序的时候,使用Xcode 运行工程时报出下面的错误错信息,我还以为是什么呢,好久没遇到过这样的错误了. **ProjectName[1512:778965] This application ...
- 继承—Monkey
public class Monkey { public void Monkey(String s){ } public void speak(){ System.out.println(" ...
- 天津大学各种Latex模板共享链接
多元统计课最后Ppt里说要共享一下模板.这里给出链接 https://www.github.com/6gbluewind 注:写本文时还未上传 ************* 下午终于有网了,于是上传了一 ...
- Android开发日志统一管理
在开发中,我们通常要对日志的输出做统一管理,下面就为大家推荐一个日志输出类,在开发阶段只需将DEBUG常量设为true,生产环境将DEBUG设为false即可控制日志的输出.啥都不说了,需要的朋友直接 ...
- dedecms4张关键表解析之1
虽然dedecms默认共有87张表,但是只有4张最核心,最最要的表. 1.第一张表:dede_arctype 栏目表 dede设计者认为不管存放什么样的数据(文章,商品,电影)都应该属于某个栏目(类 ...
- Linux防火墙iptables介绍
介绍网络防火墙是通过一个或多个允许或拒绝的规则来过滤网络流量的网络设备或软件.网络防火墙还可以执行更复杂的任务,例如网络地址转换,带宽调整,提供加密隧道以及更多与网络流量相关的任务.而我们的任务就是需 ...