父传子:
1、 在父组件的子组件标签上通过 :传递到子组件的数据名="需要传递的数据"在这里为了大家区分我将父组件中的数据定义为 : fatherData , 子组件需要接收的数据定义为: sonData 。 // 父组件<template> <div class="about"> {{fatherData}} <!-- 父传子 --> <!-- 1、 在父组件的子组件标签上通过 :传递到子组件的数据名="需要传递的数据" --> <children :sonData="fatherData"></children> </div></template> <script>import children from "@/components/children"import { defineComponent,reactive,toRefs } from "vue";export default defineComponent({ components:{ children, },name:"about",setup(){ const state = reactive({ fatherData:"hello" }) return { ...toRefs(state) }} })</script>
2、子组件依旧通过 props 来接收并且在模版中使用那么大多数情况下都会去通过父组件传递到子组件中的数据,根据这个数据去做一些特定的功能或者请求数据等等。 在 setup 钩子中第一个参数 props 就可以访问到父组件传递的数据,那么在函数中也是通过: props.父组件传递数据的名称 来操作该数据。 setup函数接收props作为其第一个参数,props对象是响应式的(单向的父 下载地址: uniapp实现日期时间选择器 vue 折叠展示多行文本组件的实现代码 |