vue组件通信

来源：互联网发布：tcp通信安卓app源码编辑：程序博客网时间：2024/06/04 17:57

父子兄弟之间的获取数据的demo

**父主件获取子主件的方法**<!doctype html><html lang="en"><head>    <meta charset="UTF-8">    <title>Document</title></head><body>   <div id="app">       <div-aa></div-aa>   </div><template id="id">     <div style="background:red;height:300px;">         我是父组件         <p>{{msg}}</p>         <p>{{info}}</p>         <bb  @div-event="accept_data"></bb>  //子组件 @事件名="接受数据的函数名" 调用接受数据的函数     </div></template><template id="bb">    <div style="background:greenyellow;height:100px;">        我是子组件        <p>{{info1}}</p>      </div></template></body></html><script src="lib/vue/vue.min.js"></script><script>     new Vue({        el:'#app',        components:{   //父组件              'div-aa':{                  template:'#id',                  data:function(){                      return{                          msg:'呵呵哒',                          info:''                      }                  },                  methods:{                     accept_data:function(data){      //接受数据的函数                       this.info=data                    }                  },                     components:{   //和data评级  //子组件                         'bb':{                             template:'#bb',                             data:function(){                                 return{                                    info1:'我是子组件的----你是傻逼'                                 }                             },                            methods:{                                fashe:function(){                                    this.$emit('div-event',this.info1);  //发射函数                                }                            },                            created:function(){   //*created*/        //调用函数                              this.fashe();                            }                         }                  }              }          }    });/** 父主件获取子组件的方法；* 1.首先在子组件的methods写上一个发射函数；* fashen:function(){*   this.$emit('事件名'，this.info)* },* created:function(){    //网页加载就调用函数* this.fashen();** }* 2.*** */</script>------------------------------------------------------

<!doctype html><html lang="en"><head>    <meta charset="UTF-8">    <title>Document</title></head><body>    <div id="app">        <div-aa></div-aa>    </div>    <template id="id">        <div style="background:red;height:300px;">            我是父组件            <p>{{msg}}</p>            <bb :out-data="msg"></bb>            <!--将父主件的msg的信息存储在out-data这个属性里面-->        </div>    </template>    <template id="bb">        <div style="background:greenyellow;height:100px;">            我是子组件            <p>{{info}}</p>            <p>{{outData}}</p>            <!-- props:['outData'] 里面的值-->        </div>    </template></body></html><script src="lib/vue/vue.min.js"></script><script>    new Vue({        el: '#app',        components: {   //父组件            'div-aa': {                template: '#id',                data: function () {                    return {                        msg: '呵呵哒'                    }                },                components: {    //和data评级  //子组件                    'bb': {                        template: '#bb',                        data: function () {                            return {                                info: '你是傻逼'                            }                        },                        props: ['outData']   //  和data平级 获取msg的属性值，在html5里面的data属性  驼峰命名法                    }                }            }        }    })    /*     * **子组件获取父组件的方法：**     * props     *     *     * */</script>

<!doctype html><html lang="en"><head>    <meta charset="UTF-8">    <title>Document</title></head><body>    <div id="app">        <div-aa></div-aa>        <bb></bb>    </div>    <template id="id">        <div style="background:red;height:300px;">            <p>{{msg}}</p>            <p>{{info}}</p>        </div>    </template>    <template id="bb">        <div style="background:greenyellow;height:100px;">            <p>{{info1}}</p>        </div>    </template></body></html><script src="lib/vue/vue.min.js"></script><script>    var et = new Vue(); //兄弟和兄弟的获取数据;因为每个组件都是vue的实例；因为this指向不明    new Vue({        el: '#app',        components: {            'div-aa': {                template: '#id',                data: function () {                    return {                        msg: '我是大哥组件',                        info: ''                    }                },                methods: {                    accept_data: function () {                        et.$on('div-event', function (data) {      /*接收数据*/                            console.log(data);                            this.info = data;                 /*先是定义（接收数据）就用created*/                        }.bind(this));                      /*on   created*/                    }       /*bind的作用就是函数外面的对象引入函数内部，就把外面父组件这个对象引入到里面去了*/                                /*emit  mounted 发射*/                },                created: function () {                    this.accept_data();                    console.log(2222)                }            },            'bb': {                template: '#bb',                data: function () {                    return {                        info1: '我是二弟组件'                    }                },                methods: {                    fashe: function () {             /*发射数据  mounted 调用函数 */                        et.$emit('div-event', this.info1)                    }                },                mounted: function () {                    this.fashe();                    console.log(1111)                }            }        }    });/** 兄弟获取兄弟**** */</script>

阅读全文

0 0