vue3组件传参
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 欢迎学习交流。非广告可入。
更多推荐
已为社区贡献3条内容
所有评论(0)