Vue知识点总结(12)——组件通信-子传父（超级详细）

news/2024/7/10 0:40:15 标签: vue, js, 前端, html

在上一期中，我们说了什么是组件通信，并且详细讲解了一下组件通信中的父传子。
既然存在父组件向子组件传值，那必然存在子组件向父组件传值。
这期我们就说一下组件通信中的子传父。

html"> <div id="app">
        <App></App>
 </div>

<script>
    Vue.component('Child',{
        template:`
            <div>
                <h2>我是子组件</h2>    
                <input type="text" @input="handleInput" />
            </div>
        `,
        methods:{
            handleInput(event){
               const val = event.target.value;
               this.$emit('inputHandler',val);
            }
        }
    })

    const App = {
        data () {
            return {
                newVal:''
            }
        },
        template:`
            <div>
                数据：{{newVal}}
                <Child  @inputHandler = 'input' ></Child>
            </div>
        `,
        methods: {
            input(newVal){
                this.newVal = newVal
            }
        }
    }
    new Vue({
        el:'#app',
        components: {
            App
        }
    });
</script>

按照惯例我们依然写了一个全局组件Child，一个局部组件App。
因为我们在App组件中使用了Child组件，所以其中产生了一个父子组件的关系。

子传父的过程：

首先在父组件中使用的子组件上绑定自定义事件
然后在子组件中绑定原生的事件，在事件函数中，通过this.$emit触发自定义事件

解释起来可能稍微绕嘴，看下我发的示例代码。

先看App组件中，我们写了一个div，里面绑定了一个newVal，展示来自子组件传进来的值，并且使用了Child这个子组件，给这个子组件上，写了一个自定义事件@inputHandler = ‘input’ ，然后在methods中定义一下这个input事件，让它把来自子组件的值赋给newVal，展示出来。
再看Child这个组件，这个组件只写了一个input输入框，收集我们输入的内容，并且绑定了一个我们都很熟悉的**@input = ‘handleInput’** 事件，然后我们最最最关键的就是这个handleInput中，我们首先要像正常操作一样拿到我们输入的内容val，然后通过this.$emit传给父组件，第一个参数就是前面我们在父组件中自定义的那个事件的名字inputHandler，第二个参数就是我们要传出去的值。
在这里插入图片描述

这就是全部的过程，我自认为已经讲解的很详细了，有问题的可以加我QQ再交流哦！

有微信小程序课设、毕设需求联系个人QQ：505417246

关注下面微信公众号，可以领取微信小程序、Vue、TypeScript、html" title=前端>前端、uni-app、全栈、Nodehtml" title=js>js、Python等实战学习资料
最新最全的html" title=前端>前端知识总结和项目源码都会第一时间发布到微信公众号，请大家多多关注，谢谢！
在这里插入图片描述