1-11 emit和prop

最新推荐文章于 2025-02-21 11:22:13 发布

原创最新推荐文章于 2025-02-21 11:22:13 发布 · 284 阅读

0 ·

CC 4.0 BY-SA版权

文章标签：

#vue emit和prop

Vue基础专栏收录该内容

15 篇文章

订阅专栏

本文介绍了一个Vue.js应用程序中如何实现子父组件间的通信。通过示例代码展示了父组件如何向子组件传递数据，并从子组件接收回调数据。具体包括了使用v-model绑定输入框值、子组件通过$emit触发事件向父组件发送数据的方法。

摘要生成于 C知道，由 DeepSeek-R1 满血版支持，前往体验 >

子父组件相互通信

这是父组件

<template>
    <div>
        父组件
        <input type="text" v-model="num">
        <Child @sendMsg="getMsg" :num="getNum"/>
        {{info}}
    </div>
</template>
<script>
import Child from "./child"
export default {
    name:"parent",
    data(){
        return{
            info:'',//初始化
            num:0
        }
    },
    //将num进行类型转换处理(String类型转Number类型)
    computed:{
        getNum(){
            return this.num - 0; 
        }
    },
    //注入子组件
    components:{
        Child
    },
    //在父组件中 定义一个方法，用来接收子组件所通过事件传来的值
    methods:{
        getMsg(data){
            //参数data就是子组件通过事件出来的数据
           this.info=data;
        }
    }
}
</script>
<style scoped>

</style>

这是子组件

<template>
    <div>
        子组件
        <button @click="sendMsg">传递</button>
    </div>
</template>
<script>
export default {
    name: "child",
    data() {
        return {
            msg: '我是子组件数据'
        }
    },
    props:{
        num:{
            type:Number,
            Default:5
        }
    },
    //运算
    computed:{
        addNum(){
            return this.num*5;
        }
    },
    methods: {
        sendMsg(event) {
            //两个参数：参数1：key 参数2：数据
            //$emit()——把事件沿着作用域链向上派送。（触发事件）
            this.$emit("sendMsg", this.addNum)//计算属性的函数不需要加调用
            //触发一个叫做sendMsg的事件，同时把第二个参数数据传递给事件对应的处理函数
        }
    }
}
</script>
<style scoped>

</style>

效果图：