Vue3 父子组件传值 ts

父子组件传值

        父子组件传值，父组件通过子组件的v-bind定义一个属性将父子的数据传递给子组件，子组件通过defineProps传递纯类型参数的方式来声明,接收父组件传过来的数据。子组件通defineEmits派发一个事件来传递给父组件

父组件

<template>

  <div class="home">

    <button @click="add">加</button>

    <div>接收子组件传过来的数据：{{child}}</div>

    <ChildView  :obj="obj" @funFlag="funFlag"></ChildView>

  </div>

</template>

<script lang="ts" setup>

import { reactive, ref } from 'vue';

import ChildView from './ChildView.vue'

const obj = reactive({ count: 0 })

const add = () => {

  obj.count++

}

const child = ref('')

const funFlag = (val: any) => {

  child.value = val

}

</script>

子组件 

<template>

  <div class="ChildView">

    <div>子组件接收父组件：{{parent}}</div>

    <button @click="sendemit">子传父</button>

  </div>

</template>

<script lang="ts" name="ChildView" setup>

import { ref, watch} from 'vue'

const props = defineProps<{

  obj: any;

}>();

const parent: any = ref(props.obj)

watch(() => props.obj.count, (newValue, oldValue) => {

  if (newValue) {

    parent.value = props.obj

  }

})

const emit = defineEmits(["funFlag"])

const child = ref(0)

emit("funFlag", child.value++)

const sendemit = () => {

  emit("funFlag", child.value++)

}

</script>