現在距離3的誕生已經過了很長時間了，筆者也是近期才開始學習vue3。對比vue2來看，vue3在寫法發生了不小的變化，最典型的例子就是vue3通過ref，或者reactive實現資料的響應式。因為ref和reactive的出現，使得vue3中父子元件的傳值方式也發生了變化

咱們先看下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)
      }
    }
  }
</script>

在vue2中，子元件向父元件傳值通過this.$emit的形式實現，但是vue3中，是不存在this的，vue3中將資料和函式都封裝在了setup中，那麼vue3是怎麼實現的呢？

我們知道vue3中的setup接收兩個引數，第一個引數是props，即父元件向子元件傳遞的props值，第二個值為context，這個值代表了當前的上下文物件，知道這個東西以後現在來實現vue3的父子元件傳值

vue3中父傳子和vue2中的父傳子一樣，再次不做過多闡述，下面重點關注的是vue3的子傳父

父元件

<template>
  <div style="color: aqua">父元件</div>
  <div>子元件對我說：{{ children_msg }}</div>
  <children :title="msg" @listen="listenToChildren"></children>
  {{ value }}
</template>
<script lang="ts">
import children from "@/views/component_emit/children.vue"
import { defineComponent,ref } from "vue"
export default defineComponent({
  components: {
    children,},name: "father",setup() {
    let msg = "我是父元件"
    let children_msg = ref("") // ref的作用是實現響應式， 如果沒有ref則不能實現響應式（引用資料型別用reactive）
    let listenToChildren = (val) => {
      children_msg.value = val // 使用ref包裹的資料，需要通過.value的形式訪問他的值
    }
    return {
      msg,children_msg,listenToChildren,}
  },})
</scwww.cppcns.com
 
ript>
<style></style>

子元件：

<template>
  <div style="color: brown">子元件</div>
  <!-- 父傳子使用方法和vue2相同 -->
  <div>父元件傳過來的值為：{{ titlwww.cppcns.come }}</div>;
  <button @click="sayToFather">向父元件說話</button>
</template>
<script lang="ts">
import { defineComponent } from "vue"
export default defineComponent({
  name: "children",props: {
    title: {
      type: String,setup(props,context) {
    // cgKKCYoJontext作用是獲取上下文對象，
    // 如果setup寫法為setup(props,{ emit })的方式的話，下面的context可以省略
    const sayToFather = () => {
      const ask = "我是子元件，我對父元件說話"
      context.emit("listen",ask)
    }
    return {
      sayToFather,})
</script>
<style></style>

總結

本篇文章就到這裡了，希望能夠給你帶來幫助，也希望您能夠多多關注我們的更多內容!