vue3和vue2父子组件传值的区别

vue2父子组件传值

父组件

<template>
  <div>
    <children :title="title" @getChildren="getChildren"></children>
    <div>子组件说： {{ childrenAsk }}</div>
  </div>
</template>
 
<script>
  import children from "./children.vue"
  export default {
    data() {
      return {
        title: "我是父组件传过来的值",
        childrenAsk: ""
      }
    },
    methods: {
      getChildren(val) {
        this.childrenAsk = val
      }
    }
  }
 </script>

子组件

<template>
  <div>
    <div>父组件传过来的值： {{ title }}</div>
    <button @click="askToFather">点击发送给父组件</button>
  </div>
</template>
<script>
  export default {
    props: {
      title: {
        type: String
      }
    },
    data() {
      return {
        askMsg: "这是我给父组件说的话"
      }
    },
    methods: {
      askToFather() {
        this.$emit("getChildren", this.askMsg)
      }
    }
  }

vue3父子组件传值

子组件

<template>
  <div style="color:brown">子组件
    <h2>嘻嘻嘻嘻嘻</h2>
    <div>{{value}}</div>
  </div>
</template>
<script setup lang="ts">
import {ref,defineProps} from 'vue'
const props =defineProps({
  value:{}
})
const isValue = ref(props.value)

</script>
<style scoped>

</style>

父组件

<script setup lang="ts">
import TheWelcome from '../components/TheWelcome.vue'
import SonWorld from '../components/SonWorld.vue'
import {ref} from 'vue'
components:{
  SonWorld
}
//定义传的值
const parentValue = ref('父传给子的值o')

</script>

<template>
  <div>
    <SonWorld :value="parentValue"></SonWorld>
  </div>
</template>

在vue2中，子组件向父组件传值通过this.$emit的形式实现，但是vue3中，是不存在this的，vue3中将数据和函数都封装在了setup中

vue3中的setup接收两个参数，第一个参数是props，即父组件向子组件传递的props值，第二个值为context，这个值代表了当前的上下文对象，