https://blog.csdn.net/qq_40259641/article/details/81265950

Vue.js父子组件如何传值 通俗易懂
原创 阿猫阿狗哈 颁布于2018-07-28 22:04:42 阅读数 14278 保藏
展开
父子组件传值道理图

一般页面的视图App.vue应为这样

一.父组件向子组件传值

1.创建子组件，在src/components/文件夹下新建一个Child.vue
2.Child.vue的中创建props，然后创建一个名为message的属性

3.在App.vue中注册Child组件，并在template中插手child标签，标签中添加message属性并赋值

4.生存改削的文件，检察浏览器

5.我们依然可以对message的值进行v-bind动态绑定

 

此时浏览器中

    父组件向子组件传值告成
    总结一下：

        子组件在props中创建一个属性，用以接收父组件传过来的值
        父组件中注册子组件
        在子组件标签中添加子组件props中创建的属性
        把需要传给子组件的值赋给该属性

二.子组件向父组件传值

1.在子组件中创建一个按钮，给按钮绑定一个点击事件

 

2.在响应该点击事件的函数中使用$emit来触发一个自界说事件，并通报一个参数

 

3.在父组件中的子标签中监听该自界说事件并添加一个响应该事件的措置惩罚惩罚要领

 

4.生存改削的文件，在浏览器中点击按钮

    子组件向父组件传值告成
    总结一下：

        子组件中需要以某种方法例如点击事件的要领来触发一个自界说事件
        将需要传的值作为$emit的第二个参数，，该值将作为实参传给响应自界说事件的要领
        在父组件中注册子组件并在子组件标签上绑定对自界说事件的监听

        在通信中，无论是子组件向父组件传值还是父组件向子组件传值，他们都有一个配合点就是有中间介质，子向父的介质是自界说事件，父向子的介质是props中的属性。抓准这两点对付父子通信就好理解了
————————————————
版权声明：本文为CSDN博主「阿猫阿狗哈」的原创文章，遵循 CC 4.0 BY-SA 版权协议，转载请附上原文来由链接及本声明。
原文链接：https://blog.csdn.net/qq_40259641/article/details/81265950

Vue.js父子组件如何传值