vue中的组件间的通信方式（一）-优快云博客

本文链接：https://blog.youkuaiyun.com/qq_44482048/article/details/128895029

文章详细介绍了在Vue.js中如何使用props进行父组件向子组件的数据传递，以及通过$emit方法实现子组件向父组件的数据反馈。示例代码展示了如何在模板中声明和使用props，以及在子组件中触发$emit事件并由父组件监听处理。

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

props和$emit

这是最常见的父子组件通信方式，父组件向子组件传递数据是通过prop传递的，子组件传递数据给父组件是通过$emit触发事件的。

1）props

props是Vue Option Api中一个选项，是父组件给子组件传递数据的一个配置，可接收数组和对象。
父组件中：

<template>
  <div id="app">
    <MyList  :list=list />
  </div>
</template>
<script>
  import MyList from './components/List'
  export default{
    name:'province',
    data(){
      return {
        list:[
          {
            id:1,
            title:'标题'
          },
          {
            id:2,
            title:'标题2'
          }
        ]
      }
    }，
    components:{
      myList
    }
  }
</script>

子组件-List组件中：

<template>
  <div class="list">
    <ul>
<!--       对从父组件那么接收的数据进行循环 -->
      <li v-for="item in list" :key="item.id">
        {{item.title}}
      </li>
    </ul>
  </div>
</template>
<script>
  export default{
    // 接收父组件传递过来的数据
    props:{
      list:Array
    }
  }
</script>

2）$emit

$emit实现子组件给父组件传递数据
在这里插入图片描述
输入框子组件：

<!-- 子组件 -->
<template>
    <div class="input">
    <Input type="text" v-model="title" style="width: 100px"></Input>
        <Button @click="add">添加</Button>
    </div>
</template>

<script>
    export default {
        name: "input",
        data(){
            return{
                title:''
            }
        },
        methods:{
            add(){
                this.$emit('addGet',this.title);
            }
        }
    }
</script>
<style scoped>
</style>

父组件：
父组件在这里定义了一个自定义事件addGet，事件名是addInfo，用来接受子组件传过来的title值。

<!-- 父组件 -->
<template>
    <div id="app">
        <input @addGet="addInfo"></input>
        <items :list="list"></items>
    </div>
</template>
<script>

    import Items  from "./items ";
    import Input from "./input ";
    export default {
        name: "test",
        components: { Items , Input },
        data() {
            return {
                list:[
                    {
                        id:1,
                        title:'标题1'
                    },
                    {
                        id:2,
                        title:'标题2'
                    }

                ]
            }
        },
        methods: {
            addInfo(title){
                this.list.push({
                    id:Math.random(),
                    title
                })
            }
        }
    }
</script>
<style scoped>
</style>

在下面的子组件中接收父组件中传递过来的数据渲染在页面中。

<!-- 子组件1 -->
<template>
    <div  class="list">
        <ul>
            <li v-for="item in list" :key="item.id">
                {{ item.title }}
            </li>
        </ul>
    </div>
</template>

<script>

    export default {
        props:{
          list:Array
        },
        name: "items",

    }
</script>
<style scoped>
</style>