vue父子间通信案列三($emit和prop用法)
2017-03-12 00:02
330 查看
<!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 父子通信(props,$.emit( ) )
- vue的props和$emit / 父子组件通信
- Vuejs——(10)组件——父子组件通信
- Vuejs第十篇之vuejs父子组件通信
- vue2.0父子组件以及非父子组件如何通信
- 使用Vue开发网站之路2-多组件通信3(父子间通信,组件与vue通信)
- vue.js 父子间通信
- Vue.js-----轻量高效的MVVM框架(十、父子组件通信)
- vue2.0父子组件间通信
- vue 父子组件通信
- vue父子组件简单通信
- 详解Vue 非父子组件通信方法(非Vuex)
- 父子组件通信vue.js
- Vue 父子组件、组件间通信
- Vuejs——(10)组件——父子组件通信
- vue2.0父子组件以及非父子组件通信传参详解
- Vuejs第十篇之vuejs父子组件通信
- vue2.0父子组件及非父子组件之间的通信方法
- Vue 父子组件、组件间通信
- vue2.0父子组件间通信的实现方法