用大头儿子和小头爸爸举例，就讲明白 vue 中父子组件的传值？

用大头儿子和小头爸爸举例，就讲明白 vue 中父子组件的传值？ | 原力计划

CSDN 程序人生发布时间：2020-06-21 09:08:15 ，浏览量：3

作者 | 扬帆向海

责编 | 王晓曼

出品 | CSDN 博客

女朋友：“扬帆，你给我上一次讲了 vue 中的组件，我现在自己学习父子组件的传值，可是官方文档看不懂啊！你能不能通过父子组件传值的知识实现大头儿子和小头爸爸互相通信呢？”

我：“可以呀！我先分别给你讲父组件向子组件传值和子组件向父组件传值，最后在给你写个案例，实现父子组件的相互通信。”

点击【说话】按钮，大头儿子给小头爸爸传递消息。

小头爸爸收到消息，点击【回复】按钮，给大头儿子发送消息。

父组件向子组件传值

1. 传值步骤

① 子组件在props中创建一个属性，用以接收父组件传过来的数据；

② 父组件中注册子组件。通过属性绑定（v-bind:）的形式，把需要传递给子组件的数据传递到子组件的内部，供子组件使用；

③ 在子组件标签中添加子组件props中创建的属性；

④ 把需要传给子组件的值赋给该属性。

2. 代码示例





    
    父组件向子组件传值


    
        var vm = new Vue({
            el: '#app',
            data: {
                pmsg: '父组件中的内容',
                hello: '我是父组件传过来的'
            },
            components: {
                mycom: {
                    data: function () {
                        return {
                            msg: '我是子组件本身的数据'
                        }
                    },
                    // 子组件在props中创建一个属性，用以接收父组件传过来的值
                    props: ['parentMsg', 'content'],
                    template: '{{msg + "---" + parentMsg + "----" + content}}'
                }
            }
        });

【效果如下】

3. 注意事项

① prop 是子组件用来接受父组件传递过来的数据的一个自定义属性；

②父组件的数据需要通过 props 把数据传给子组件，子组件需要显式地用 props 选项声明 “prop”；

③prop 是单向绑定的：当父组件的属性变化时，将传导给子组件，但是不会反过来；

④ props中的数据都是只读的，无法进行重新赋值。

子组件向父组件传值

1. 传值步骤

① 子组件需要以某种方式例如点击事件的方法来触发一个自定义事件；

② 将需要传递的值作为$emit的第二个参数，该值将作为实参传递给响应自定义事件的方法；

③ 在父组件中注册子组件，在子组件标签上监听该自定义事件，并添加一个响应该事件的处理方法。

2. 代码示例

点击子组件中的按钮，给父组件发送子组件的信息：


    
        父组件


    
        Vue.component('child', {
            template: `
                
                    子组件
                    发送
                
            `,
            data() {
                return {
                }
            },
            methods: {
                sendMessage() { // 按钮的点击事件
                    this.$emit("receive","父组件您好，我是子组件！") // 调用父组件传递过来的方法，并且把数据传递出去
                }
            }
        })
        var vm = new Vue({
            el: '#app',
            methods: {
                // 定义在子组件中通过 this.$emit() 调用的方法
                handleEvent(val) {
                    console.log("父组件收到的消息是：",val)
                }
            }
        })

【效果如下】

3. 注意事项

① 父组件是使用 props 传递数据给子组件，但如果子组件要把数据传递回去，就需要使用自定义事件！

② 我们可以使用 v-on 绑定自定义事件, 每个 Vue 实例都实现了事件接口(Events interface)，即：

使用 $on(eventName) 监听事件；

使用 $emit(eventName) 触发事件。

③ 父组件可以在使用子组件的地方直接用 v-on 来监听子组件触发的事件。

大头儿子小头爸爸案例

这个案例实现了文章开头：大头儿子和小头爸爸之间的通信。





    
    
    父子组件通信
    
    
        .father,
        .son {
            width: 150px;
            height: 100px;
        }

        .info {
            color: #446ee4;
            font-size: 20px;
            font-size: bold;
        }

        .desc {
            font-size: 18px;
        }

        .btn {
            width: 100px;
            float: left;
            height: 40px;
            font-size: 18px;
            color: #fff;
            font-weight: bold;
            background: #446ee4;
            margin-top: 15px;
        }

        .parent,
        .child {
            display: inline-block;
            width: 550px;
        }
    



    
        
            
            我是小头爸爸


            小头爸爸接收到的消息:【{{msg}}】

更多精彩推荐 ☞中国最优秀的程序员都有哪些？王兴、张小龙、张一鸣是哪类？| 蒋涛说 ☞前字节跳动程序员 28 岁提前退休引热议，网友：我也想！ ☞听说你还没收到端午福利？程序人生来宠你！ ☞秋名山老司机从上车到翻车的悲痛经历，带你深刻了解什么是 Spark on Hive！| 原力计划 ☞MATLAB 被禁点燃导火索，国产软件路在何方？ ☞破碎的互联网下，加密技术正在恢复数据主权！你点的每个“在看”，我都认真当成了喜欢

用大头儿子和小头爸爸举例，就讲明白 vue 中父子组件的传值？ | 原力计划

[ 申请 ]友情链接：