第二十节:带你梳理Vue2:Vue子组件向父组件传参(事件传参)

1. 自定义事件

除了可以处理原生的DOM事件, v-on指令也可以处理组件内部触发的自定义的事件,调用this.$emit()函数就可以触发一个自定义事件

$emit() 触发事件函数接受一个自定义事件的事件名以及其他任何给事件函数传递的参数. 然后就可以在组件上使用v-on来绑定这个自定义事件

js 复制代码
{
    methods: {
        handleClick(){
            this.clicks++
            this.$emit("count",this.clicks )
        }
    }
}

所以我们就可以利用自定事件来处理子组件触发父组件数据的更改和向父组件传值

2. 子组件触发父组件数据的改变

通过父组件向子组件传值的学习,我们已经知道了Vue是单向下行数据流, 子组件更改props中的数据不会触发父组件数据的改变, 但是由于响应式原理,父组件数据的改变会导致子组件props中值的改变

那么我们怎样才能在子组件中改变显示的结果呢.

思路:

  1. 子组件中没法更改父组件中的数据,那么我们就让父组件自己的函数改自己的数据
  2. 如何在子组件中触发父组件中的函数呢, 就可以通过自定义事件
  3. 子组件在函数中触发自定义事件, 将父组件中更改数据的函数绑定为自定义事件的函数
  4. 然后父组件中的数据一变,因为响应式,所以子组件中的数据会自动改变

示例代码如下:

html 复制代码
<div id="app">
    <!-- 使用组件 -->
    <!-- 3.在子组件中绑定自定义事件, 将父组件的方法绑定为自定义事件的处理函数-->
    <my-component 
                  :clicks="clicks" 
                  @count="handleParentClick"
     ></my-component>
    
</div>


<!-- 组件模板 -->
<template id="MyComponent">
    <div>
        被点击了{{clicks}}次
        <!-- 1. 子组件通过原生click事件触发子组件自己的函数 -->
        <button @click="handleClick">点击</button>
    </div>
</template>


<script>

    //  组件选项对象
    let MyComponent = {
        props:["clicks"],
        template: `#MyComponent`,
        methods:{
            handleClick(){
                // 2.子组件函数中触发自定义事件
                this.$emit("count")
            }
        }
    }

    //  实例中注册组件
    const vm = new Vue({
        el:"#app",
        data: {
            clicks:0
        },
        components: {
            "MyComponent": MyComponent
        },
        methods:{
            handleParentClick(){
                // 4. 在父组件函数中修改父组件中的数据
                this.clicks++
            }
        }
    })
</script>

示例结果

最后父组件数据一变,子组件显示结果自然变化

我们也知道$emit方法在触发自定义事件的时候,还可以给自定义事件传参, 这样就可以实现子组件向父组件传参

3. 子组件向父组件传参

上一小节,我们是在子组件中通过自定义事件触发父组件中的函数, 在父组件中修改数据,

同样我们也可以在子组件中修改数据,然后将修改后的数据通过自定义事件传参的方式,传递给父组件函数,在父组件函数中直接用子组件传过来修改后的数据直接替换父组件中的数据

示例代码如下:

html 复制代码
<div id="app">
    <!-- 使用组件 -->
    <!-- 3.在子组件中绑定自定义事件, 将父组件的方法绑定为自定义事件的处理函数-->
    <my-component 
                  :clicks="clicks" 
                  @count="handleParentClick"
                  ></my-component>
</div>



<!-- 组件模板 -->
<template id="MyComponent">
    <div>
        被点击了{{clicks}}次
        <!-- 1. 子组件通过原生click事件触发子组件自己的函数 -->
        <button @click="handleClick">点击</button>
    </div>
</template>

<script>



    //  组件选项对象
    let MyComponent = {
        props:["clicks"],
        template: `#MyComponent`,
        data(){
            return {
                count: this.clicks
            }
        },
        methods:{
            handleClick(){
                // 2.子子组件函数中触发自定义事件
                // 2.1 在触发自定义事件的时候向自定事件传参
                this.count+=2
                this.$emit("count",this.count)
            }
        }
    }

    //  实例中注册组件
    const vm = new Vue({
        el:"#app",
        data: {
            clicks:0
        },
        components: {
            "MyComponent": MyComponent
        },
        methods:{
            handleParentClick(count){
                // 4. 在父组件函数中修改父组件中的数据
                // 4.1 接受自定义事件触发时传递的参数
                console.log(count)
                this.clicks = count
            }
        }
    })

</script>
相关推荐
gnip5 小时前
企业级配置式表单组件封装
前端·javascript·vue.js
一只叫煤球的猫6 小时前
写代码很6,面试秒变菜鸟?不卖课,面试官视角走心探讨
前端·后端·面试
excel7 小时前
Three.js 材质(Material)详解 —— 区别、原理、场景与示例
前端
掘金安东尼8 小时前
抛弃自定义模态框:原生Dialog的实力
前端·javascript·github
hj5914_前端新手11 小时前
javascript基础- 函数中 this 指向、call、apply、bind
前端·javascript
薛定谔的算法11 小时前
低代码编辑器项目设计与实现:以JSON为核心的数据驱动架构
前端·react.js·前端框架
Hilaku11 小时前
都2025年了,我们还有必要为了兼容性,去写那么多polyfill吗?
前端·javascript·css
yangcode12 小时前
iOS 苹果内购 Storekit 2
前端
LuckySusu12 小时前
【js篇】JavaScript 原型修改 vs 重写:深入理解 constructor的指向问题
前端·javascript
LuckySusu12 小时前
【js篇】如何准确获取对象自身的属性?hasOwnProperty深度解析
前端·javascript