Vue组件传值

最新推荐文章于 2025-03-14 10:34:59 发布

爱学习的小欣欣

最新推荐文章于 2025-03-14 10:34:59 发布

阅读量1.1k

点赞数 1

分类专栏： # VUE 文章标签： javascript 开发语言 ecmascript

本文链接：https://blog.youkuaiyun.com/weixin_47227886/article/details/124631227

版权

VUE 专栏收录该内容

11 篇文章

订阅专栏

本文介绍了Vue.js中如何实现父组件向子组件传递数据（通过props）和子组件向父组件回传信息（通过自定义事件）。同时探讨了兄弟组件之间的通信方法，包括通过$emit和$on在new.js文件中进行数据交换。

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

1. 父组件向子组件传值

① 子组件在props中创建一个属性，用以接收父组件传过来的数据；

② 父组件中注册子组件。通过属性绑定（v-bind:）的形式，把需要传递给子组件的数据传递到子组件的内部，供子组件使用；

③ 在子组件标签中添加子组件props中创建的属性；

④ 把需要传给子组件的值赋给该属性。

注意：

① prop 是子组件用来接受父组件传递过来的数据的一个自定义属性；

②父组件的数据需要通过 props 把数据传给子组件，子组件需要显式地用 props 选项声明 “prop”；

③prop 是单向绑定的：当父组件的属性变化时，将传导给子组件，但是不会反过来；

④ props中的数据都是只读的，无法进行重新赋值。

<!DOCTYPE html>
<html lang="en">

<head>
    <meta charset="UTF-8">
    <title>父组件向子组件传值</title>
    <script src="js/vue.js"></script>
</head>

<body>
    <div id="app">
        <!-- 父组件中注册子组件 -->
        <!-- 在子组件标签中添加子组件props中创建的属性, 把需要传给子组件的值赋给该属性 -->
        <mycom :parent-msg='pmsg' :content='hello'></mycom>
    </div>
    <script>
        var vm = new Vue({
            el: '#app',
            data: {
                pmsg: '父组件中的内容',
                hello: '我是父组件传过来的'
            },
            components: {
                mycom: {
                    data: function () {
                        return {
                            msg: '我是子组件本身的数据'
                        }
                    },
                    // 子组件在props中创建一个属性，用以接收父组件传过来的值
                    props: ['parentMsg', 'content'],
                    template: '<h3>{{msg + "---" + parentMsg + "----" + content}}</h3>'
                }
            }
        });
    </script>
</body>

</html>

2. 子组件向父组件传值

① 子组件需要以某种方式例如点击事件的方法来触发一个自定义事件；

② 将需要传递的值作为$emit的第二个参数，该值将作为实参传递给响应自定义事件的方法；

③ 在父组件中注册子组件，在子组件标签上监听该自定义事件，并添加一个响应该事件的处理方法。

注意：

① 父组件是使用 props 传递数据给子组件，但如果子组件要把数据传递回去，就需要使用自定义事件！

② 我们可以使用 v-on 绑定自定义事件, 每个 Vue 实例都实现了事件接口(Events interface)，即：

使用 $on(eventName) 监听事件；

使用 $emit(eventName) 触发事件。

③ 父组件可以在使用子组件的地方直接用 v-on 来监听子组件触发的事件。

<!DOCTYPE html>
<html lang="en">

<head>
    <meta charset="UTF-8">
    <title>父组件向子组件传值</title>
    <script src="js/vue.js"></script>
</head>

<body>
    <div id="app">
        <h3>父组件</h3>
        <child @receive="handleEvent"></child>
    </div>
    <script>
        Vue.component('child', {
            template: `
                <div>
                    <h3>子组件</h3>
                    <button @click="sendMessage()">发送</button>
                </div>
            `,
            data() {
                return {
                }
            },
            methods: {
                sendMessage() { // 按钮的点击事件
                    this.$emit("receive","父组件您好，我是子组件！") // 调用父组件传递过来的方法，并且把数据传递出去
                }
            }
        })
        var vm = new Vue({
            el: '#app',
            methods: {
                // 定义在子组件中通过 this.$emit() 调用的方法
                handleEvent(val) {
                    console.log("父组件收到的消息是：",val)
                }
            }
        })
    </script>
</body>

</html>

在组件传值过程中，无论是父传子、还是子传父，它们都有一个共同点就是有一个中间介质。父传子的介质是props中的属性，子传父的介质是自定义事件。

父子组件的关系可以总结为prop向下传递，事件向上传递。父组件通过prop给子组件下发数据，子组件通过事件给父组件发送信息。

父组件通过 v-bind:绑定参数传给子组件，子组件通过props接受这个参数。

在组件的最底层开始写事件，由最底层组件逐步向上$emit事件流，并携带相应参数，最后在父组件内完成总的数据处理。

3. 兄弟组件之间如何传值

1、在main.js同级目录下新建new.js文件

2、在组件a中传出值

先引入new.js文件，再通过$emit传值

3、在同级b组件中通过$on接收

//1
import Vue from 'vue'
export default new Vue()

//2

<template>
  <div @click="onfocus"></div>
</template>

<script>
    import New from '@/new.js'
    
  export default{
    methods:{
        onfocus:function(fromid){
          New.$emit('getisshow',{
            show:true
          })
         }
      }
  }
</script>

//3

<script>    import New from '@/new.js'
    
  export default{
    created(){
      New.$on('getisshow',data => {
        console.log(data)   //{show:true}
      })
    }
  }
  </script>