vue3和vue2传值不同

Vue3和Vue2在传值方面有一些不同之处。Vue3中使用了`setup()`函数来代替Vue2中的`data()`函数，同时也取消了Vue2中的`$emit`和`$on`方法。在Vue3中，可以使用`props`和`emit`来实现父子组件之间的传值。

下面是一个使用Vue3实现父子组件传值的例子：

父组件：

<template>
  <div>
    <child :title="title" @getChildData="getChildData"></child>
    <div>子组件传回的数据：{{ childData }}</div>
  </div>
</template>

<script>
import Child from './Child.vue'

export default {
  components: {
    Child
  },
  data() {
    return {
      title: '我是父组件传过来的值',      childData: ''
    }
  },
  methods: {
    getChildData(data) {
      this.childData = data
    }
  }
}
</script>

子组件：

<template>
  <div>
    <h2>{{ title }}</h2>
    <button @click="sendData">向父组件传值</button>
  </div>
</template>

<script>
export default {
  props: {
    title: String
  },
  methods: {
    sendData() {
      this.$emit('getChildData', '我是子组件传回的数据')
    }
  }
}
</script>

在上面的例子中，父组件通过`@getChildData`监听子组件传回的数据，子组件通过`this.$emit('getChildData', '我是子组件传回的数据')`向父组件传值。