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 ...
随机推荐
- 05003_Linux的基本命令
1.目录结构 Linux的目录结构:Linux各目录及每个目录的详细介绍 链接:Linux各目录及每个目录的详细介绍 密码:84ab 2.LInux的基本命令 (1)目录切换命令 ①root是超级管理 ...
- CSDN 轻松周赛赛题:能否被8整除
轻松周赛赛题:能否被8整除 题目详情 给定一个非负整数,问能否重排它的全部数字,使得重排后的数能被8整除. 输入格式: 多组数据,每组数据是一个非负整数.非负整数的位数不超过10000位. 输出格式 ...
- 国庆 day 2 下午
最大值(max) Time Limit:1000ms Memory Limit:128MB 题目描述 LYK有一本书,上面有很多有趣的OI问题.今天LYK看到了这么一道题目: 这里有一个长度为n的 ...
- [ACM] HDU 1400 Mondriaan's Dream (状态压缩,长2宽1长方形铺满)
Mondriaan's Dream Time Limit: 20000/10000 MS (Java/Others) Memory Limit: 65536/32768 K (Java/Othe ...
- 智课雅思短语---五、 in contrast / on the contrary
智课雅思短语---五. in contrast / on the contrary 一.总结 一句话总结:相反 in contrast / on the contrary. 1.replace/ su ...
- zzulioj--1775-- 和尚特烦恼1——是不是素数(素数水题)
1775: 和尚特烦恼1--是不是素数 Time Limit: 2 Sec Memory Limit: 128 MB Submit: 563 Solved: 193 SubmitStatusWeb ...
- Dictionaries
A dictionary is like a list, but more general. In a list, the indices have to be integers; in a dict ...
- jqueryValidator自定义校验规则的一种方式(覆盖源码)
1.自定义js文件:jqValid-extend.js 内容: function setDefaultValidate(){ $.extend(true, $.validator, { // 方法 m ...
- Spring深入浅出(一)IOC的基本知识
Spring前言 Spring是一个企业级开发框架,为解决企业级项目开发过于复杂而创建的,框架的主要优势之一就是分层架构,允许开发者自主选择组件. Spring的两大核心机制是IOC(控制反转)和AO ...
- PostgreSQL Replication之第一章 理解复制概念(2)
1.2不同类型的复制 现在,您已经完全地理解了物理和理论的局限性,可以开始学习不同类型的复制了. 1.2.1 同步和异步复制 我们可以做的第一个区分是同步复制和异步复制的区别. 这是什么意思呢?假设我 ...