vue3组件传参

vue3组件传参

整理一份干净整洁的代码，小白可以直接照搬过去

1.父子组件传参，(这里不展示爷孙组件，兄弟组件)
2.使用vue3.2版本，如果你的是3.0，自己手动return。

子组件向父组件传参，点击button按钮触发事件。
子组件👇

<!-- 子组件 -->
<template>
	<div>
		<button @click="searchData">搜索</button>
	</div>
</template>

<script lang="ts">
import { ref, reactive, toRefs} from 'vue'
export default {
  name: '',
  setup(props, { emit }) {
    let myName = ref(props.name)
    let myAge = ref(props.age)
    let mySex = ref(props.sex)
    let searchData = () => {
      myName.value = '变更后的值'
      myAge.value = 18
      mySex.value = '女'
      //触发自定义事件
      emit('searchData', { myName: myName.value, myAge: myAge.value, mySex: mySex.value })
    }
    const refData = toRefs(data)
    return {
      ...refData,
      searchData,
    }
  },
}
</script>
<style scoped>

</style>

父组件👇

<!-- 父组件 -->
<template>
  <div class="body">
    <div>姓名:{{ name }}</div>
    <div>年龄:{{ age }}</div>
    <div>年龄:{{ sex }}</div>
    <SideNavBar :name="name" :age="age" :sex="sex" 			 @searchData="searchData" />
  </div>
</template>
<script setup>

import { ref } from 'vue'
import Child '@/components/child .vue'

let name = ref('变更前的值')
let age = ref(66)
let sex = ref('男')
let searchData = (e) => {
  name.value = e.myName
  age.value = e.myAge
  sex.value = e.mySex
}
</script>
<style >
}
</style>

接下来是父组件向子组件传参👇👇👇

<!-- 父组件 -->
<template>
  <div class="body">
    <Child :childData="parents" />
  </div>
</template>

<script  setup>
import { ref } from 'vue'
import Child '@/components/child.vue'
const parents = ref('将要传的值')
</script>
<style >
</style>

<template>
	<div>{{childData}}</div>
</template>

<script  setup>
import { reactive, ref, toRefs, onMounted } from 'vue'
import Taro, { useDidShow } from '@tarojs/taro'
defineProps({
  childData: String,
})
</script>

<style >
</style>

简简单单，有手就行。
微信vue交流群👇
群主:18439915503
vue2/3 vite ts 欢迎学习交流。非广告可入。