vue组件之间的通信

来源：互联网发布：网络与新媒体是干嘛的编辑：程序博客网时间：2024/05/29 15:09

一、组件之间的通信

组件之间数据传递：
props down,events up

1、父组件给子组件传值

props down

步骤：
①在创建子组件指定属性，把要传递的值给属性
<son name='zhangsan'></son>
②在子组件内部声明props属性
props:['name']
//props数组中的元素就是属性的名称，在组件创建完成之后，只要是通过该属性传值了，就可以直接在props的元素中拿到传递过来的数据

注意事项：
1、在组件中，data属性必须是一个带有返回值而且返回值是对象的方法
2、如果在通过属性传值时，值是会变化，通过v-bind指令将变量绑定到属性
<son v-bind:name='kw'></son>

<!DOCTYPE html><html><head lang="en">    <meta charset="UTF-8">    <title></title>    <script src="js/vue.js"></script></head><body><div id="example">    {{msg}}    <father></father></div><script type="text/x-template" id="father-template">    <div>        <h1>this is father component</h1>        <input type="text" v-model="kw"/>        <button @click="handleClick">clickMe</button>        <hr/>        <son :name="kw"></son>    </div></script><script type="text/x-template" id="son-template">    <div>        <h1>this is son component</h1>        <span>{{"接受到的数据为:"+name}}</span>    </div></script><script>    //创建组件    //在组件中，data属性必须是一个带有返回值而且返回值是对象的方法    Vue.component('father',{        template:'#father-template',        data: function () {            return{                kw:''            }        },        methods:{            handleClick: function () {                console.log('ready to update data');            }        }    })    Vue.component('son',{        props:['name'],        template:"#son-template"    })    new Vue({        el: '#example',        data: {            msg: 'Hello Directive'        }    })</script></body></html>

2、子组件和父组件通信
events up

步骤：
要想通过事件传值，要约定事件的名称：toFather
①在调用子组件时绑定自定义的事件
<son @toFather=""></son>
②在子组件中触发自定义的事件，并传值
this.$emit('事件的名称','传递的数据')
this.$emit('toFather',123);

<!DOCTYPE html><html><head lang="en">    <meta charset="UTF-8">    <title></title>    <script src="js/vue.js"></script></head><body><div id="example">    {{msg}}    <father></father></div><script type="text/x-template" id="father-template">    <div>        <h1>this is father component</h1>        <span>{{"儿子发来的数据："+msgFromSon}}</span>        <hr/>        <son @toFather="recEvent"></son>    </div></script><script type="text/x-template" id="son-template">    <div>        <h1>this is son component</h1>        <input type="text" v-model="kw"/>        <button @click="handleClick">sendToFather</button>    </div></script><script>    Vue.component('father',{        template:'#father-template',        data:function(){          return {              msgFromSon:''          }        },        methods:{            recEvent:function(result){                this.msgFromSon = result            }        }    })    Vue.component('son',{        template:'#son-template',        data:function(){            return{                kw:''            }        },        methods:{            handleClick: function () {                //通过事件向父组件传递数据                this.$emit('toFather',this.kw)            }        }    })    new Vue({        el: '#example',        data: {            msg: 'Hello Directive'        }    })</script></body></html>

3、ref
父组件操作子组件：

<子组件 ref='名称'></子组件>
在父组件中可以通过:this.$refs.名称
(react: this.refs.名称)

子组件操作父组件：
this.$parent.属性或者方法

<!DOCTYPE html><html><head lang="en">    <meta charset="UTF-8">    <title></title>    <script src="js/vue.js"></script></head><body><div id="example">    {{msg}}    <father></father></div><script type="text/x-template" id="father-template">    <div>        <h1>father component</h1>        <button @click="checkSonStatus">查看儿子在干嘛</button>        <hr/>        <son ref="mySon"></son>    </div></script><script type="text/x-template" id="son-template">    <div>        <h1>son component</h1>        <button @click="checkParentStatus">查看老爹在干嘛</button>    </div></script><script>    Vue.component('father', {        template: '#father-template',        data:function(){            return {                name:'zhangsantadie'            }        },        methods:{            nowDoing: function () {                return ' is eating...'            },            checkSonStatus:function(){                //得到儿子的名称                var sonName = this.$refs.mySon.name;                //得到在干嘛                var sonStatus = this.$refs.mySon.nowDoing();                //返回                console.log(sonName+sonStatus);            }        }    })    Vue.component('son', {        template: '#son-template',        data:function(){            return {                name:'zhangsan'            }        },        methods:{            nowDoing: function () {                return ' is study...'            },            checkParentStatus: function () {                //如何获取父组件                // this.$parent                console.log(this.$parent.name+this.$parent.nowDoing());            }        }    })    new Vue({        el: '#example',        data: {            msg: 'Hello Directive'        }    })</script></body></html>

4、兄弟组件之间通信
借助于事件
var bus = new Vue()

<!DOCTYPE html><html><head lang="en">    <meta charset="UTF-8">    <title></title>    <script src="js/vue.js"></script></head><body><div id="example">    <chat-room></chat-room></div><script type="text/x-template" id="charRoomTempalte">    <div>        <ul>            <li v-for="item in list">{{item}}</li>        </ul>        <lucy></lucy>        <mike></mike>    </div></script><script type="text/x-template" id="lucyTempalte">    <div>        <label >lucy</label>        <input type="text" v-model="lucyTxt"/>        <button @click="send">发送</button>    </div></script><script type="text/x-template" id="mikeTempalte">    <div>        <label >mike</label>        <input type="text" v-model="mikeTxt"/>        <button @click="send">发送</button>    </div></script><script>    Vue.component('chat-room', {        template: '#charRoomTempalte',        data: function () {            return{                list:[]            }        }    })    Vue.component('lucy', {        template: '#lucyTempalte',        data: function () {          return {              lucyTxt:''          }        },        methods:{            send: function () {                //将lucy输入的内容存到聊天室的列表中                this.$parent.list.push('lucy:'+this.lucyTxt);            }        }    })    Vue.component('mike', {        template: '#mikeTempalte',        data: function () {            return {                mikeTxt:''            }        },        methods:{            send: function () {                //将lucy输入的内容存到聊天室的列表中                this.$parent.list.push('mike:'+this.mikeTxt);            }        }    })    new Vue({        el: '#example',        data: {            msg: 'Hello Directive'        }    })</script></body></html>

<!DOCTYPE html><html><head lang="en">    <meta charset="UTF-8">    <title></title>    <script src="js/vue.js"></script></head><body><div id="example">    <laoda></laoda>    <hr/>    <laoer></laoer></div><script type="text/x-template" id="laoda-template">    <div>        <h1>laoda</h1>        <button @click="tellLaoer">回家吃饭</button>    </div></script><script type="text/x-template" id="laoer-template">    <div>        <h1>laoer</h1>        <span v-if="msgFromLaoDa">{{"老大说："+msgFromLaoDa}}</span>    </div></script><script>    //新建一个Vue的实例，通过bus完成事件的绑定和触发    var bus = new Vue();    Vue.component('laoda', {        template: '#laoda-template',        methods:{            tellLaoer: function () {                //触发事件通知老二回家吃饭                bus.$emit('eventToBrother','赶紧回家吃饭')            }        }    })    Vue.component('laoer', {        template: '#laoer-template',        data:function(){            return {                msgFromLaoDa:null            }        },        mounted: function () {            //事件的绑定            bus.$on('eventToBrother', function (result) {                console.log(result);                this.msgFromLaoDa = result;            }.bind(this))        }    })    new Vue({        el: '#example',        data: {            msg: 'Hello Directive'        }    })</script></body></html>

阅读全文

0 0