Web前端必做vue笔记之一：组件传值（一）

最新推荐文章于 2025-02-11 21:33:10 发布

我是小白菜鸟

最新推荐文章于 2025-02-11 21:33:10 发布

阅读量158

点赞数

CC 4.0 BY-SA版权

文章标签：前端 vue.js javascript

本文链接：https://blog.youkuaiyun.com/qq_42302014/article/details/121070274

本文详细介绍了Vue.js中组件间的数据传递，包括父组件如何向子组件传递数据，子组件如何将数据反馈回父组件，以及非父子组件间的通信方式。通过属性绑定和自定义事件，实现组件间的有效通信，增强应用的灵活性。

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

Web前端必做vue笔记之一：组件传值（一）

组件之间的关系
1.父级向子级传递数据
2.子级向父级传递数据
3.非父子级传递数据

//父级向子级传递数据： 使用属性传递
//父级中
<template>
   <div>

      <Child  :msg="message"></Child>  <!--//给组件自定义一个属性名并绑定 -->

   </div>
</template>
<script>
import  Child from './components/Child.vue'
export default {
       components:{
            Child
       },
       data(){
             return{
                  message:'app.vue data'
             }
       }     
}
</script>

//子级中
<template>
     <div>
          <h1>{{msg}}</h1>
     </div>
</template>

<script>
export default {
     props:["msg"], //里面是个数组的字符串，通过props拿到属性名msg
}
</script>

//子级向父级传递数据，用自定义事件
//子级中
<template>
     <div>
        <button @click="sendData">传递数据</button>
     </div>
</template>

<script>
export default {
     data(){
         return {
         childData:"I'm  child"
         }
     },
     methods:{
           sendData(){
                 this.$emit("myevent",this.childData)  //第一个参数为自定义事件，第二个为要传的数据
           }
     }
}
</script>

//父级中
<template>
   <div>

      <Child @myevent="changeData" :msg="message"></Child>  <!--//给组件自定义一个属性名并绑定 -->
   </div>
</template>
<script>
import  Child from './components/Child.vue'
export default {
       components:{
            Child
       },
       data(){
             return{
                  childData:'',
             }
       },
       methods:{
            changeData(childData){ //用这个事件获取子级的数据
                    console.log(childData);
                    this.childData = childData;
            } 
       }
     
}
</script>