Vue组件间通信方式_组件通信有哪些方案-CSDN博客

本文链接：https://blog.csdn.net/qq_43731176/article/details/121892358

本文详细解读了Vue组件间的四种基本通信类型，包括父子、兄弟、祖孙及非关系组件，然后介绍了八种常见的通信解决方案：props传递、自定义事件$emit、ref、EventBus、parent/root、attrs/listeners、Provide/Inject和Vuex。实例演示了如何通过这些方式实现数据的双向流动和组件间通信。

摘要由CSDN通过智能技术生成

1.组件通信的类型

#组件通信可以概括为4中：
1.父子间组件通信
2.兄弟间组件通信
3.祖孙与后代组件之间的通信
4.非关系的组件通信

在这里插入图片描述
2.组件间通信方案

#常规的8种组件通信方案：
1.通过 props 传递
2.通过 $emit 触发自定义事件
3.使用 ref
4.EventBus
5.parent或root
6.attrs 与 listeners
7.Provide 与 Inject
8.Vuex

3.Props传递数据（父传子）

<html>
    <head>
        <meta charset="utf-8">
        <script src="vue.min.js"></script>
    </head>
    <body>
        <div id="app">
            <my-component :name="name" :age="age">
                <template #header>
                    <div>this is header,props:{{name}}</div>
                </template>
                <template #footer>
                    <div>this is footer,props:{{age}}</div>
                </template>
            </my-component>
        </div>
    </body>
    <script>
        Vue.component('my-component',{
            template:`
            <div>
                <slot name="header"></slot>
                <slot name="footer"></slot>
            </div>
            `,
            props:{
                name:String,
                age:{
                    type:Number,
                    default: 10,
                    require: true
                }
            }
        })
        new Vue({
            el:"#app",
            data(){
                return{
                    name:'mike',
                    age:12
                }
            }
        })
    </script>
</html>

4.$emit 触发自定义事件（子传父）

<div>the age now is {{age}}</div>
   <my-component :name="name" :age.sync="age">
       <template #header>
           <div>this is header,props:{{name}}</div>
       </template>
       <template #footer>
          <div>this is footer,props:{{age}}</div>
       </template>
    </my-component>
</div>
Vue.component('my-component',{
  template:`
    <div>
     <slot name="header"></slot>
     <slot name="footer"></slot>
     <input v-model="msg">
     <button @click="submit()">确定</button>
      </div>
      `,
     props:{
      name:String,
      age:{
        type:Number,
        default: 10,
        require: true
      }
  },
 data(){
  return{
     msg:12
   }
 },
 methods:{
   submit(){
     this.$emit('update:age',this.msg)
 }
}

5.ref(访问对应ref的数据)

<html>
    <head>
        <meta charset="utf-8">
        <script src="vue.min.js"></script>
    </head>
    <body>
        <div id="app">
            <div>{{msg}}</div>
            <button @click="getMsg()">获取数据</button>
            <my-component :name="name" :age.sync="age" ref="children">
                <template #header>
                    <div>this is header,props:{{name}}</div>
                </template>
                <template #footer>
                    <div>this is footer,props:{{age}}</div>
                </template>
            </my-component>
        </div>
    </body>
    <script>
        Vue.component('my-component',{
            template:`
            <div>
                <slot name="header"></slot>
                <slot name="footer"></slot>
                <input v-model="msg">
                <button @click="submit()">确定</button>
            </div>
            `,
            props:{
                name:String,
                age:{
                    type:Number,
                    default: 10,
                    require: true
                }
            },
            data(){
                return{
                    msg:12,
                    msg1:'this is children msg'
                }
            },
            methods:{
                submit(){
                    this.$emit('update:age',this.msg)
                }
            }
        })
        new Vue({
            el:"#app",
            data(){
                return{
                    name:'mike',
                    age:12,
                    msg:''
                }
            },
            methods:{
                getMsg(){
                    this.msg = this.$refs.children.msg1;
                }
            }
        })
    </script>
</html>

6.parent root(兄弟组件通信)

<html>
    <head>
        <meta charset="utf-8">
        <script src="vue.min.js"></script>
    </head>
    <body>
        <div id="app">
            <first-kid>
            </first-kid>
            <second-kid>
            </second-kid>
        </div>
    </body>
    <script>
        Vue.component('first-kid',{
            template:`
            <div>
                <p>{{msg}}</p>
                <button @click="submit()">传递消息</button>
            </div>
            `,
            data(){
                return{
                    msg:'first-kid msg'
                }
            },
            methods:{
                submit(){
                 this.$parent.on(this.msg);
                }
            }
        })
        Vue.component('second-kid',{
            template:`
            <div>
                <p>组件二</p>
                <p>接受的消息：{{msg}}</p>
                <button @click=" getData()">接收消息</button>
            </div>
            `,
            data(){
                return{
                    msg:''
                }
            },
            methods:{
                getData(){
                   this.msg =  this.$parent.emit();
                }
            }
        })
        new Vue({
            el:"#app",
            data(){
                return{
                    msg:''
                }
            },
            methods:{
                on(newValue){
                    this.msg = newValue;
                },
                emit(){
                    return this.msg;
                }
            }
        })
    </script>
</html>

7.provide 与 inject

<html>

<head>
    <meta charset="utf-8">
    <script src="vue.min.js"></script>
</head>

<body>
    <div id="app">
        <first-kid>
            <second-kid>
            </second-kid>
        </first-kid>
    </div>
</body>
<script>
    Vue.component('first-kid', {
        template: `
            <div>
               <slot></solt>
            </div>
            `,
        data() {
            return {
                msg: ''
            }
        },
        methods: {
            onSomeEvent(newValue) {
                this.msg = newValue;
            }
        }
    })
    Vue.component('second-kid', {
        template: `
            <div>
                后代组件获得的消息：{{kidMsg}}
            </div>
            `,
        data() {
            return {
                kidMsg: ''
            }
        },
        methods: {
            
        },
        inject:['msg'],
        created(){
            this.kidMsg = this.msg;
        }
    })
    new Vue({
        el: "#app",
        data() {
            return {
                msg: ''
            }
        },
        methods: {
        },
        provide() {
            return {
                msg: 'grand msg'
            }
        }
    })
</script>

</html>