Vue父子组件传值

最新推荐文章于 2025-07-10 17:55:35 发布

gclhaha

最新推荐文章于 2025-07-10 17:55:35 发布

阅读量178

点赞数

CC 4.0 BY-SA版权

分类专栏： Vue 文章标签： Vue

本文链接：https://blog.youkuaiyun.com/weixin_43797872/article/details/99680802

Vue 专栏收录该内容

1 篇文章

订阅专栏

先上代码

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>Title</title>
</head>
<body>
//父组件内容
<div id="app">
    <com1 @func="show" v-bind:parentmsg="msg"></com1>
</div>
//子组件模板
<template id="tmp1">
    <div>
        <h1>这是子组件--{{parentmsg}}</h1>
        <input type="button" value="这是子组件的按钮" @click="myClick">
    </div>
</template>
<script src="https://cdn.jsdelivr.net/npm/vue/dist/vue.js"></script>
<script>
	//子组件
    var com1 = {
    	//引用模板
        template: "#tmp1",
        //接收父组件内容
        props:['parentmsg'],
        //子组件内容
        data() {
            return {
                sonMsg: '子组件msg'
            }

        },
        methods: {
        	//通过方法向父组件传递子组件的值
            myClick() {
                this.$emit('func', this.sonMsg)
            }
        }
    };
    //父组件
    var vm = new Vue({
        el: "#app",
        data: {
            dataFromSon:'',
            msg:'父组件Msg'
        },
        methods: {
            show(data) {
                console.log(data);
                this.dataFromSon=data
            }
        },
        //绑定子组件
        components: {
            com1
        }
    })
</script>
</body>
</html>

父组件传值给子组件

关键代码

<div id="app">
    <com1 @func="show" v-bind:parentmsg="msg"></com1>
</div>

通过v-bind:parentmsg="msg"把父组件中的msg传给parentmsg

子组件通过props属性进行接收props:['parentmsg']

通过<h1>这是子组件--{{parentmsg}}</h1>在页面上显示

子组件传值给父组件

给子组件添加一个方法，方法中的内容就是传值的关键
子组件myclick方法

 myClick() {
    this.$emit('func', this.sonMsg)
 }

（func名字随意，起一个连接作用。第二个参数是要传递的数据，传递子组件的sonMsg信息）

子组件通过@func="show"绑定一个show方法，方法中带有了子组件的sonMsg信息

 <com1 @func="show" v-bind:parentmsg="msg"></com1>

show是父组件中要写的方法

show(data) {
    console.log(data);
    this.dataFromSon=data
}

将sonMsg通过data参数赋值给dataFromSon

结果

在这里插入图片描述