End.
原

vue-学习知识点总结（七）vue父子组件传参，子组件向父组件传数据

2022-04-19 22:09 所属：Vue 阅读数：107

在vue开发过程中，我们经常需要从父组件往子组件传数据，同时父组件也需要接收子组件回传的数据。

那么vue是如果实现呢？


父组件通过 props 向下传递数据给子组件，子组件通过 events 给父组件发送消息。


一、父组件向子组件传递数据

例如：父组件使用testCom子组件

<test-com :ddd="传给组件数据" />


子组件接收：

name: 'TestCom',

props: {
  ddd: { type: String, default: 'OK' }
}


子组件通过 props 接收数据，然后可以使用watch监听数据。

如：

  watch: {
    ddd: {
      immediate: true, // 第一次加载就初始化数据
      handler(val) {
        console.log(val)
      }
    }
  },

 watch用法可以参考《vue-学习知识点总结（一）-知识点10》


二、子组件向父组件传递数据

这里主要介绍子组件通过 $emit() 传递数据到父组件。


例如：testCom子组件

子组件向父组件传递数据data

method: {
  open(data) {
    this.$emit('open', data)
  }
}


父组件接收：

<test-com :ddd="传给组件数据" @open="open" />
# 省略代码method: {
  open(data) {
    console.log(data)
  }
}
End.