Vue子组件传父组件、父组件传子组件_出组件穿子组件-优快云博客

本文链接：https://blog.youkuaiyun.com/Andy_Singh/article/details/98951870

本文详细介绍了Vue.js中父子组件间的通信方式，包括父组件向子组件传递数据的方法及子组件向父组件发送事件的技巧。通过实例展示了如何使用props进行属性绑定以及如何利用$emit触发事件。

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

一、父传子组件

//父组件传值，传数组传值都是可以的
<app-footer  v-bind:title="title"></app-footer>
<app-users v-bind:users="users"></app-users>
    data () {
           return {
                 title:"传递的是一个值，(number string boolean)"

                 users:[
                     {name:"henry",job:"web开发",show:false},
                     {name:"henry",job:"web开发",show:false},
                 ],    
            }
        },

子组件接值

       //子组件接值,两种方法都可以
        props:['title']
        //下面这种方法是标准的
         props:{
             title:{
                 type:String,
                 required:true
             }
         },

二、子组件传值父组件

子组件页面

      //可以是点击事件,点击就执行传值
         <router-link to="shop_car" @click="shop_car()">去购物车结算</router-link>
          //也可以是上了就执行的方法，把它放在一个上了就执行的方法里面也可以 
        <span>{{shop_car()}}</span>
        //myCar自己定义的父组件用得上，第二个参数就是传递是值，数组什么的都可以
         shop_car:{
            go_myCar: function(){
                //子组件向父组件传值，用$emit
                this.$emit('myCar',this.my_car)
            },
 
        },

父组件接值

//注意myCar是从子组件自己定义的，getMyCar这个页面自己定义的
<template>
    <div>
        <v-header @myCar="getMyCar"></v-header>
    </div>
</template>
<script>
    //引入axios,类似于ajax
    import axios from 'axios';
    //引入组件
    import Header from "./Header";
    export default {
        name: "Shop_car",
        data(){
            return{
                car:'',
            }
        },
        //myCar子组件自己定义的名字，getMyCar自己定义的方法
        //data传的行参
        methods:{
            getMyCar(data){
                this.car = data
            },
        },
        //组件
        components:{
            "v-header":Header,
        },
    }
</script>