vue3TS父子组件传参

父传子

第一种方法：
父组件中：

<script setup lang="ts">
	import SonComponent from "@/components/sonComponent.vue";
	import {ref} from "vue";
	const name = ref<string>('我是父传子的数据');
</script>

<template>
  	<div>我是父组件</div>
  	<son-component :name="name"></son-component>
</template>

子组件中：

<script setup lang="ts">
  	const props = defineProps(['name'])
  	console.log(props)
</script>

<template>
  	<div>我是子组件</div>
  	{{props.name}}
</template>

第二种方法：
父组件中：

<script setup lang="ts">

import SonComponent from "@/components/sonComponent.vue";
import {ref} from "vue";
const name = ref<string>('我是父传子的数据');
</script>

<template>
  <div>我是父组件</div>
  <son-component :name="name"></son-component>
</template>

子组件中：

<script setup lang="ts">
  interface Props {
      name?:string
  }

  const props = defineProps<Props>()
</script>

<template>
  <div>我是子组件</div>
  {{props.name}}
</template>

子传父

子组件中：

<script setup lang="ts">
  // 从vue中引入ref
  import {ref} from "vue";
  // 使用defineEmits注册一个emit自定义事件
  const emit = defineEmits(["getValue"])
  // 数据
  const content = ref<String>("我是子组件传给父组件的值")
  // 这里通过点击事件发送数据，也可以写在钩子函数中
  function sendValue() {
      emit('getValue',content)
  }

</script>

<template>
  <div>我是子组件</div>
    <button @click="sendValue" >传值给父组件</button>
</template>

父组件中：

<script setup lang="ts">

import SonComponent from "@/components/sonComponent.vue";
function acceptValue(data) {
    // 这里可以拿到从子组件传来的值
    console.log(data.value)
}
</script>

<template>
  <div>我是父组件</div>
  <son-component @getValue="acceptValue"></son-component>
</template>