vue2.0 组件通信

组件通信：
　　　　子组件要想拿到父组件数据 props
　　　　子组件不允许直接给父级的数据, 赋值操作如果想更改，父组件每次穿一个对象给子组件，
　　　　对象之间引用。

　　　　例子：

　　<script>
　　　　　　　　window.onload=function(){
　　　　　　　　　　　　new Vue({
　　　　　　　　　　　　　　el:'#box',
　　　　　　　　　　　　　　data:{
　　　　　　　　　　　　　　　　giveData:{
　　　　　　　　　　　　　　　　　　　　a:'我是父组件数据'
　　　　　　　　　　　　　　　　　　}
　　　　　　　　　　　　　　　　},
　　　　　　　　　　　　　　components:{
　　　　　　　　　　　　　　　　'child-com':{
　　　　　　　　　　　　　　　　　　props:['msg'],
　　　　　　　　　　　　　　　　　　template:'#child',
　　　　　　　　　　　　　　　　　　methods:{
　　　　　　　　　　　　　　　　　　　　　　change(){
　　　　　　　　　　　　　　　　　　　
　　　　　　　　　　　　　　　　　　　　　　　　this.msg.a='被改了';
　　　　　　　　　　　　　　　　　　　　　　　　}
　　　　　　　　　　　　　　　　　　　　　　}　　
　　　　　　　　　　　　　　　　　　　　}
　　　　　　　　　　　　　　　　　　}
　　　　　　　　　　　　　　　　　});
　　　　　　　　　　　　　　};
　　　　　　</script>
　　　　　　<template id="child">
　　　　　　　　　　<div>
　　　　　　　　　　　　<span>我是子组件</span>
　　　　　　　　　　　　<input type="button" value="按钮" @click="change">
　　　　　　　　　　　　<strong>{{msg.a}}</strong>
　　　　　　　　　　</div>
　　　　　　</template>

　　　　　　<div id="box">
　　　　　　　　　　父级: ->{{giveData.a}}
　　　　　　　　<br>
　　　　　　　　<child-com :msg="giveData"></child-com>
　　　　　　</div>

　　例子：自定义事件

　　<script>
　　　　//准备一个空的实例对象
　　　　var Event=new Vue();

　　　　　　var A={
　　　　　　　　　　template:`
　　　　　　　　　　　　　　　　<div>
　　　　　　　　　　　　　　　　　　<span>我是A组件</span> -> {{a}}
　　　　　　　　　　　　　　　　　　<input type="button" value="把A数据给C" @click="send">
　　　　　　　　　　　　　　　　</div>
`　　　　　　　　　　　　　　,
　　　　　　　　　　　　　　methods:{
　　　　　　　　　　　　　　　　　　send(){
　　　　　　　　　　　　　　　　　　　　　　Event.$emit('a-msg',this.a);
　　　　　　　　　　　　　　　　}
　　　　　　　　　　},
　　　　　　　　　　data(){
　　　　　　　　　　　　　　return {
　　　　　　　　　　　　　　　　a:'我是a数据'
　　　　　　　　　　　　　　}
　　　　　　　　　　　　}
　　　　　　　　};
　　　　　　var B={
　　　　　　　　　　　　template:`
　　　　　　　　　　　　　　　　　　<div>
　　　　　　　　　　　　　　　　　　　　　　<span>我是B组件</span> -> {{a}}
　　　　　　　　　　　　　　　　　　　　　　<input type="button" value="把B数据给C" @click="send">
　　　　　　　　　　　　　　　　　　</div>
　　　　　　　　　　　　　　`,
　　　　　　　　　　　　methods:{
　　　　　　　　　　　　　　　　send(){
　　　　　　　　　　　　　　　　　　　　Event.$emit('b-msg',this.a);
　　　　　　　　　　　　　　　　}
　　　　　　　　　　　　},
　　　　　　　　　　data(){
　　　　　　　　　　　　return {
　　　　　　　　　　　　　　　　a:'我是b数据'
　　　　　　　　　　　　　　}
　　　　　　　　　　}
　　　　　　　　};
　　　　　　var C={
　　　　　　　　template:`
　　　　　　　　　　　　　　<div>
　　　　　　　　　　　　　　　　<h3>我是C组件</h3>
　　　　　　　　　　　　　　　　<span>接收过来的A的数据为: {{a}}</span>
　　　　　　　　　　　　　　　　<br>
　　　　　　　　　　　　　　　　<span>接收过来的B的数据为: {{b}}</span>
　　　　　　　　　　　　　　</div>
　　　　　　　　　　　　`,
　　　　　　　　　　　　data(){
　　　　　　　　　　　　　　return {
　　　　　　　　　　　　　　　　　　a:'',
　　　　　　　　　　　　　　　　　　b:''
　　　　　　　　　　　　　　　　}
　　　　　　　　　　　　　},
　　　　　　　　　　mounted(){
　　　　　　　　　　　　　　　　//var _this=this;
　　　　　　　　　　　　　　　　//接收A组件的数据
　　　　　　　　　　　　　　　　Event.$on('a-msg',function(a){
　　　　　　　　　　　　　　　　　　　　　　this.a=a;
　　　　　　　　　　　　　　　　}.bind(this));

　　　　　　　　　　　　　　　　//接收B组件的数据
　　　　　　　　　　　　　　　　Event.$on('b-msg',function(a){
　　　　　　　　　　　　　　　　　　　　　　this.b=a;
　　　　　　　　　　　　　　　　　　}.bind(this));
　　　　　　　　　　　　　　　　}
　　　　　　　　　　　　};


　　　　　　　　window.onload=function(){
　　　　　　　　　　　　　　new Vue({
　　　　　　　　　　　　　　　　　　el:'#box',
　　　　　　　　　　　　　　　　　　components:{
　　　　　　　　　　　　　　　　　　　　　　　　'com-a':A,
　　　　　　　　　　　　　　　　　　　　　　　　'com-b':B,
　　　　　　　　　　　　　　　　　　　　　　　　'com-c':C
　　　　　　　　　　　　　　　　　　}
　　　　　　　　　　　　　　});
　　　　　　　　};
　　　　</script>

<body>
　　　<div id="box">
　　　　　　<com-a></com-a>
　　　　　　<com-b></com-b>
　　　　　　<com-c></com-c>
　　</div>
</body>
posted @ 2017-05-09 16:55  柠檬先生  阅读(269)  评论(0)  编辑  收藏  举报