组件之间的传值-通信方式

作者: 璃安_ | 来源:发表于2022-11-09 23:04 被阅读0次

vue 6种通信总结①
vue通信、传值的多种方式
vue最全的组件通信和插槽，看这一篇就够了
Vue 组件传值
vue通信方式
Vue3.2组件间通信
【Vue】组件 - 验证props
vue2.0小结
React 父子组件通信
Vuex(一) —— 集中式的状态管理仓库

常见使用场景可以分为三类:
父子组件通信: props; $parent /$ children; provide / inject ; ref ; $attrs /$ listeners
兄弟组件通信: eventBus ; vuex
跨级通信: eventBus；Vuex；provide / inject 、 $attrs /$ listeners

一、父传子---props

<!DOCTYPE html>
<html lang="en">

<head>
    <meta charset="UTF-8">
    <meta http-equiv="X-UA-Compatible" content="IE=edge">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>Document</title>
    <script src="https://cdn.jsdelivr.net/npm/vue@2/dist/vue.js"></script>
</head>

<body>
    <div id="app">
        <h1>{{msg}}</h1>
        <!-- 1.给子组件通过自定义属性绑定父组件需要传递的数据 -->
        <son :zdy="msg"></son>
    </div>

    <script>
        const app = new Vue({
            el: '#app',
            data: {
                msg: '磊哥无敌'
            },
            methods: {

            },
            components: {
                'son': {
                    // 2.在子组件中通过props属性，props属性是一个数组，可以获取到组件上的属性值
                    props: ['zdy'],
                    template: `
                        <div>
                            <h3>轻颜相机</h3>
                            <h4>{{zdy}}</h4>    
                        </div>
                    `
                }
            }
        })
    </script>
</body>

</html>

image.png

二、子传父

$emit(自定义事件名，传递的参数) 发射(注册)事件$ on(监听事件，触发methods方法) 监听事件

<div id="app">
        <p>{{fmsg}}</p>
        <input type="button" value="父组件按钮" v-on:click="update">
        <!-- 2. 监听子组件上面的 handle-info 自定义事件 -->
        <!-- 注意 getInfo如果不写小括号，那么methods中第一个参数就是自定义事件中传递过来的值；如果需要额外传递参数，需要使用$event来接收自定义事件传的参 -->
        <son @handle-info="getInfo($event,10)" :fmsg="fmsg"></son>
    </div>
    <script>
        const app = new Vue({
            el: "#app",
            data: {
                fmsg: '你无法拒绝的理由',
            },
            methods: {
                update () { },
                //  3. 通过父组件的methods中被触发的方法接收子组件传递参数
                getInfo (val, num) {
                    console.log(val, num)  //'我还有现在的素质我很欣慰!'
                    this.fmsg = val.info
                }
            },
            components: {
                'son': {
                    props: ['fmsg'],
                    data: function () {
                        return {
                            info: '我还有现在的素质我很欣慰!'
                        }
                    },
                    template: `
                        <div class="son">
                            <h3>son组件标题</h3>
                            <p>{{fmsg}}</p>
                            <input type="button" value="子组件按钮" @click="sendInfo">
                        </div>
                    `,
                    methods: {
                        sendInfo () {
                            // console.log(this.info)
                            // 子传父，需要通过自定义事件来实现
                            // 1. 注册自定义事件 -- 注意 自定义时间名不要使用驼峰命名法!
                            this.$emit('handle-info', { info: this.info })
                        }
                    }
                }
            }
        })

    </script>