Vue3-setup语法糖的父子之间传值及编程式导航的使用

文章介绍了在Vue3中,如何进行父组件向子组件传递信息,以及子组件如何回传消息给父组件的方法,包括使用`defineProps`和`defineEmits`。同时,展示了如何利用`vue-router`实现编程式导航。
摘要由CSDN通过智能技术生成

父组件向子组件传值

<template>
  <div class="hello">
  我是父组件
  <!-- 父组件向子组件传递信息 -->
   <Child :msg="msg"></Child>
  </div>
</template>
 
<script lang="ts" setup>
import Child from './Child'
import {ref} from 'vue'
const msg = ref<string>('父组件信息:xxx');
 
</script>
 
<style scoped>
 
</style>

子组件接受父组件的消息需要从vue中引入defineProps方法

<template>
<!-- msg是父组件传递过了的值 -->
  <div>我是子组件,父组件的值是{{msg}}</div>
</template>
 
<script lang="ts" setup>
import { toRefs } from 'vue'
const props = defineProps({
  //子组件接收父组件传递过来的值
  msg: String,
})
//父组件传递过来的值
const {msg} =toRefs(props)
 
</script>
 
<style>
 
</style>

子组件向父组件传递消息,需要引入defineEmits方法

<template>
<!-- msg是父组件传递过了的值 -->
  <div>我是子组件,父组件的值是{{msg}}</div>
</template>
 
<script lang="ts" setup>
import { toRefs } from 'vue'
const emit = defineEmits(['testFunc'])
emit('testFunc', '子组件的消息')
 
</script>
 
<style>
 
</style>

父组件接收子组件消息

<template>
  <div class="hello">
  我是父组件
  <!-- 父组件向子组件传递信息 -->
   <Child :msg="msg" @testFunc="childMsg"></Child>
  </div>
</template>
 
<script lang="ts" setup>
import Child from './Child'
import {ref} from 'vue'
const msg = ref<string>('父组件信息:xxx');
const childMsg = (val) => {
    console.log('子组件传过来的消息:'+val)
}
</script>
 
<style scoped>
 
</style>

Vue3编程式导航的使用,需要从router中引入userRouter方法

import { useRouter } from 'vue-router';

使用userRouter

const router = useRouter();
let timer = setTimeout(() => {
    router.push('/xxx')
}, 10000)

uniApp采用Vue3的Composition API(也称为setup语法糖)是为了提供更简洁、更模块化的组件开发体验。在使用setup时,我们可以利用`ref`, ` reactive`, `onMounted`, `onUpdated`, 等API来进行状态管理,尤其是对于组件间的通信。 组件传值通常有几种方: 1. Props(父子组件传递):组件通过props向下传递数据给组件,这是最基础的传值。在setup语法,你可以直接将数据作为props传入。 ```javascript // 组件 <template> <child-component :value="parentValue" /> </template> <script setup> import { ref } from 'vue' const parentValue = ref('初始值') </script> ``` 2. $emit 和 $on (事件总线):如果需要在兄弟组件之间共享数据,可以创建一个全局的自定义事件总线(Event Bus)。但是,setup语法下推荐使用`provide`和`inject`代替: ```javascript // 全局事件总线 const eventBus = createLocalStore() // 组件提供数据 setup() { provide('sharedData', someSharedData) } // 组件注入数据并监听更新 setup() { const sharedData = inject('sharedData') onMounted(() => { watch(sharedData, () => {/* 更新操作 */}) }) } ``` 3. Refs:通过refs,可以在组件内部修改组件的状态,并在组件接收变化。这适用于单向数据流场景,如表单联动。 尽管setup语法简化了部分代码结构,但它并没有改变基本的组件间通信原理。结合上述方,你可以有效地在uniApp的Vue3项目实现组件间的数据交互。
评论
添加红包

请填写红包祝福语或标题

红包个数最小为10个

红包金额最低5元

当前余额3.43前往充值 >
需支付:10.00
成就一亿技术人!
领取后你会自动成为博主和红包主的粉丝 规则
hope_wisdom
发出的红包
实付
使用余额支付
点击重新获取
扫码支付
钱包余额 0

抵扣说明:

1.余额是钱包充值的虚拟货币,按照1:1的比例进行支付金额的抵扣。
2.余额无法直接购买下载,可以购买VIP、付费专栏及课程。

余额充值