Vue3子组件向父组件返回数据

Vue3子组件向父组件返回数据

Vue3的子组件向父组件返回数据与Vue2有所不同。具体表现在emits，setup()的使用上，但原理上仍然是相同的，也就是说子组件在向父组件返回数据时，父组件在定义子组件时绑定事件，子组件在返回数据时触发相应的事件就可以了。

1.子组件写法

<template>
  <div>
      ......
      <el-button @click="按钮单击事件">Default</el-button>
  </div>
</template>
​
<script>
export default {
  name: "组件名",
  props: {
    属性: {
      type: 类型
    }
  },
  emits: [
    '触发事件'
  ],
  setup (props, context) {
    function 按钮单击事件 (value) {
      context.emit('触发事件', value)
    }
​
    return {按钮单击事件}
  }
}
</script>
​
<style scoped>
​
</style>

说明：

1.在子组件中使用emits标识触发的事件，emits类型为数组

2.通过setup方法定义组件的操作事件，并在操作事件中触发相应的事件

3.触发事件不再使用$emit，而是使用上下文的emit，即：context.emit

2.父组件写法

<template>
    <组件标签 :属性="变量" @触发事件="事件名"/>
</template>
​
<script>
import 组件名 from '../components/组件名.vue'
​
export default {
  name: 'App',
  components: {
    组件名
  },
  data () {
    return {
      变量: '',
    }
  },
  methods: {
      事件名 () {
          
      }
  }
}
</script>
​
<style scoped>
​
</style>

父组件的写法与Vue2中的写法相同。