首页 > 代码库 > vue组件通信
vue组件通信
1.子组件如何快速改变父组件中传过来的值（通过引用传递的方式给子组件，子组件可以直接改变对象中的属性）
// App.vue<template> <div> <News :a-msg="msg" :out-data="http://www.mamicode.com/outData"></News> {{msg}} <h3>{{outData.a}}</h3> </div></template><script>import News from ‘./components/News.vue‘export default { data () { return { msg: ‘我是app组件中的内容‘, // 如果子组件想直接改变的值，可以传递一个对象到子组件中，因为这样的话，在组件中改变a，父组件也改变了，是因为js对象是引用传递 outData:{ a:"我是从组件app中给出的变量" } } }, components:{ News }}</script>在子组件中可以这样直接修改父组件传过来的对象
// News.vue<template> <div> <h1>{{msg}}</h1> <h2>{{aMsg}}</h2> <h3 @click="change">{{outData.a}}</h3> </div></template> <script> export default { props:[‘aMsg‘,‘outData‘], data(){ return { ‘msg‘: ‘我是news组件中的内容‘ } }, methods:{ change(){ this.outData.a = ‘我可以直接这样改变你哦‘ } } }</script>
2.如果想从父组件中接收过来的值能在子组件中可以被修改，需要一个额外的内部变量来进行接收，这样在可以直接在内部改变自己的值，从而间接达到改变
// News.vue<template> <div> <h1 @click="change">{{getMsg}}</h1> </div></template> <script> export default { props:[‘aMsg‘], data(){ return { // 如果想从父组件中接收过来的值能在子组件中可以被修改，需要一个额外的内部变量来进行接收，这样在可以直接在内部改变自己的值，从而间接达到改变 ‘getMsg‘:this.aMsg } }, mounted(){ //或者将值在这里面改变 }, methods:{ change(){ this.getMsg = "改变" } } }</script>3.单一事件管理组件通信(所有组件之间快速通信)
父组件中引入三个组件AA,BB,CC，然后这三个同级组件之间互相通信
// App.vue<template> <div> <AA :event="event"></AA> <BB></BB> <CC :event="event"></CC> </div></template><script>import Vue from ‘vue‘var Event = new Vue();import AA from ‘./components/A.vue‘import BB from ‘./components/B.vue‘import CC from ‘./components/C.vue‘export default { data () { return { msg: ‘我是app组件中的内容‘, event:Event } }, components:{ AA, BB, CC }}</script>AA组件
<template> <div> <span>{{msg}}</span> <input type="button" value="http://www.mamicode.com/将A组件值传给C组件" @click="send"> </div></template><script> export default{ props:[‘event‘], data(){ return { msg:‘我是a组件中的值‘ } }, methods:{ send(){ this.event.$emit(‘a-msg‘,this.msg); } } }</script>BB组件
<template> <div> <span>{{msg}}</span> <input type="button" value="http://www.mamicode.com/将B组件值传给C组件"> </div></template><script> export default{ data(){ return { msg:‘我是b组件中的值‘ } } }</script>CC组件接受AA,BB组件中的值
<template> <div> <h1>{{msg}}</h1> <h3>我是接受过来的数据msg:{{getmsg}}</h3> </div> </template><script> export default{ props:[‘event‘], data(){ return { msg:‘我是c组件中的值‘, getmsg:‘默认值‘ } }, mounted(){ var _this = this this.event.$on(‘a-msg‘,function(a){ _this.getmsg=a; }); } }</script>这样就轻松完成多组件之间的值传递
vue组件通信
声明：以上内容来自用户投稿及互联网公开渠道收集整理发布，本网站不拥有所有权，未作人工编辑处理，也不承担相关法律责任，若内容有误或涉及侵权可进行投诉： 投诉/举报 工作人员会在5个工作日内联系你，一经查实，本站将立刻删除涉嫌侵权内容。