vue组件之间的通信示例
父组件传递数据给子组件=>
通过在子组件中写入传递参数props:{ childMs:{ type:String } } 或者第二种写法props:[ 'childMs' ]
子组件传递数据给父组件=>
子组件注册触发事件,父组件注册 触发子组件事件后的方法写在method里面
源码贴上,有点小乱,不过可以很清楚看到组件之间是如何进行通信的
<!DOCTYPE html>
<html>
<head>
<title>组件之间的通信</title>
<meta charset="utf-8">
<script type="text/javascript" src="./node_modules/vue/dist/vue.js"></script>
<script type="text/javascript" src="./node_modules/vue-router/dist/vue-router.js"></script>
</head>
<body>
<div id="app">
<account>
</account>
</div>
<template id="tel">
<div>
<h1>父组件</h1>
<login :child-ms="ms" ></login>
<login v-on:child-say="listenToMyBoy"></login>
<!-- -->
<p>页面中的两个button是由于渲染了两个login</p>
<p>do you like me ?{{childWords}}</p>
</div>
</template>
<template id="child-tel">
<div>
<!-- 父组件传过来的childMs数据 -->
<h2>{{childMs}}</h2>
<button @click="onClickMe">传递数据给父组件</button>
</div>
</template>
<script type="text/javascript">
//定义一个账号组件
Vue.component('account' ,{
data(){
return {
ms:'我是源于父组件', //传递给子组件数据
childWords:""
}
},
template:"#tel",//在这里使用登录组件
components:{
'login':{
template:"#child-tel",
props:{
childMs:{
type:String
}
},
data(){
return {
somedate:"我是子组件的数据传递给父组件",
}
},
methods:{
onClickMe:function(){
this.$emit('child-say',this.somedate);
}
}
}//组件的名字叫做login
},
methods:{
listenToMyBoy:function(somedate){
this.childWords = somedate;
}
}
})
new Vue({
el:'#app'
})
</script>
</body>
</html>
- 组件与组件之间的通信以及vue2.0中的变化、示例
- vue2.0组件之间的通信
- vue组件之间的通信
- vuex 管理组件之间的通信
- Vue2.0组件之间通信
- Vue多层组件之间通信 3层 父向子
- vue.js组件与组件之间的通信
- vue2.0组件之间的通信
- vue组件之间的通信以及如何在父组件中调用子组件的方法和属性
- 组件与组件之间的通信以及vue2.0中的变化、示例
- vue2.0父子组件以及非父子组件之间通信
- Vue兄弟组件之间的通信(EventBus)
- vue中的$emit 与$on父子组件与兄弟组件的之间通信方式
- Vue2.0与 [百度地图] 结合使用———vue+webpack+axios+百度地图实现组件之间的通信
- Vue项目实战(四)- 组件之间的通信
- vue实现组件之间传值功能示例
- vue开发:vue父子组件与非父子组件之间的通信
- Vue2.0 父子组件之间通信
- Vue1.0学习总结(4)———Vue1.0自定义组件、Vue1.0组件之间的通信、slot的使用
- Vue2.0基于vue-cli+webpack同级组件之间的通信教程(推荐)