vue 父子组件间通信

最新推荐文章于 2022-09-09 12:13:50 发布

转载最新推荐文章于 2022-09-09 12:13:50 发布 · 217 阅读

2 ·

CC 4.0 BY-SA版权

原文链接：https://segmentfault.com/a/1190000014381699

文章标签：

#javascript #ViewUI

本文介绍Vue.js中父子组件之间的通信方式。通过一个示例详细解释了如何利用props从父组件向子组件传递数据，以及子组件如何通过$emit触发事件向父组件发送信息。

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

对于初学vue的同学，遇到的一个问题就是父子组件间如何通信。父组件调用一个子组件，父组件的属性如何能够传递给子组件使用，子组件里的数据如何能传递给父组件？下面我们通过一个demo来解答这个问题。

父组件

<template>
  <div class="parent">
    我是父组件
    <!--父组件监听子组件触发的say方法，调用自己的parentSay方法-->
    <!--通过:msg将父组件的数据传递给子组件-->
    <children :msg="msg" @say="parentSay"></children>
  </div>
</template>

<script>

import Children from './children.vue'

export default {
  data () {
    return {
      msg: 'hello, children'
    }
  },

  methods: {
      // 参数就是子组件传递出来的数据
      parentSay(msg){
          console.log(msg) // hello, parent
      }
  },

  // 引入子组件
  components:{
      children: Children
  }
}
</script>

子组件

<template>
  <div class="hello">
    <div class="children" @click="say">
      我是子组件
      <div>
        父组件对我说：{{msg}}
      </div>
    </div>

  </div>
</template>

<script>

  export default {
      //父组件通过props属性传递进来的数据
      props: {
          msg: {
              type: String,
              default: () => {
                  return ''
              }
          }
      },
      data () {
        return {
            childrenSay: 'hello, parent'
        }
      },

      methods: {
          // 子组件通过emit方法触发父组件中定义好的函数，从而将子组件中的数据传递给父组件
          say(){
              this.$emit('say' , this.childrenSay);
          }
      }
  }
</script>

结果

总结

vue的父子组件间通信可以总结成一句话：
父组件通过 prop 给子组件下发数据，子组件通过$emit触发事件给父组件发送消息，即 prop 向下传递，事件向上传递。