Vue组件传值

最新推荐文章于 2025-12-15 13:40:30 发布

转载最新推荐文章于 2025-12-15 13:40:30 发布 · 180 阅读

0 ·

CC 4.0 BY-SA版权

原文链接：https://blog.csdn.net/qq_53318060/article/details/124547337

文章标签：

#java #java进阶 #后端

面试同时被 3 个专栏收录

114 篇文章

订阅专栏

阿里巴巴

114 篇文章

订阅专栏

学习路线

106 篇文章

订阅专栏

本文介绍了在Vue中如何进行组件间的通信，包括父组件向子组件传递数据以及子组件向父组件传递数据的方法，并通过实例展示了具体实现过程。同时提到了同级组件通信、计算属性computed和侦听器属性watch等概念。

父级组件向子级组件传值：
在这里插入图片描述
子级组件向父级组件传值：

<!-- App.vue -->
<template>
  <div>
    <h1>hello vnsief</h1>
    <h2>{{ChildCodata}}</h2>
    <ChildCo :msg="message" @myevent="changeData"></ChildCo>
  </div>
</template>

<script>
  // 引入组件
  import ChildCo from './components/ChildCo.vue'
  export default {
    name: 'App',
    // 注册组件
    components: {
      ChildCo
    },
    // 数据保存在return的对象中
    data:function(){
      return{
        message:"hello rst try",
        isLogin:false,
        fruits:["香蕉","苹果","鸭梨"],
        ChildCodata:""
      }
    },
    // 方法
    methods:{
      sayHi:function(){
        alert("hi")
      },
      changeData:function(childdata){
        console.log(childdata);
        this.ChildCodata = childdata;
      }
    }
  }
</script>


<!-- ChildCo.vue -->
<template>
    <div>
        <h1>{{msg}}</h1>
        <button @click="sendData">传递数据</button>
    </div>
</template>

<script>
    export default{
        props:['msg'],
        data:function(){
            return {
                childdata:"子级组件的数据"
            }
        },
        methods:{
            sendData:function(){
                // 触发父级的自定义事件myevent
                this.$emit("myevent",this.childdata)
            }
        }
    }
</script>

此外还有同级组件传值，计算属性computed，侦听器属性watch等，了解即可。