Vue3 ＜script setup＞的用法

#Vue3 ＜script setup＞的用法| 来源: 网络整理| 查看: 265

1 原来在export default的data函数声明的变量可以如下方式声明：

const fileperson = ""

2 声明ref类型的变量

//导入人 const fileperson = ref("")

3 子组件接收父组件传过来的值，使用props方式

父组件中代码如下,使用:titles(子组件props设置的变量),取出父组件中声明的变量titles数组

import TableForm from "../components/TableForm.vue" const titles = [ {title:"提交支付"}, {title:"导出"}, {title:"支付统计"} ]

子组件TableForm中的代码如下，使用defineProps声明props，并设置type和default默认值

import {ref} from "vue" const props = defineProps({ titles:{ type:Array, default:[] }, }) const titles = ref(props.titles) const data = ref(props.data)

注意：在元素中无法直接使用titles，在外边我们声明同名的变量titles，并使用ref，通过props.titles设置ref的值，从父组件传过来值后，页面中元素的值会实时更新。

4 因为在模式下是没有this的，我们无法用this.$router的方式访问路由，在这里我们这样写：

import {useRouter} from "vue-router" const router = useRouter() const loginEvent = (()=>{ router.push({ path:'Layout' }) })

5 子组件中元素的点击事件点击后，调用父组件中的一个方法

这样的场景我们使用defineEmits

子组件中的代码如下，是小程序的例子

查看更多 const emits = defineEmits(['send']) const moreEvent = (()=>{ console.log("more event click!") emits('send') })

父组件中的代码如下：

function moreEvent(){ }

6 因为在模式下是没有this的，我们想在系统的生命周期钩子函数中使用this，需要像下面这样写：

import { onLoad } from "@dcloudio/uni-app" import {getCurrentInstance} from 'vue' const instance = getCurrentInstance().proxy const props = defineProps({ datalist:{ type:Array, default:[] } }) onLoad(()=>{ console.log("onLoad zyxlist数据：", instance.datalist) })

【本文地址】

公司简介

联系我们

今日新闻

推荐新闻

专题文章