Vue3 <script setup> 单文件组件 组合式 API 相关语法

1.vue3使用vuex

javascript 复制代码
<script setup>
import {ref} from "vue"
import {useStore} from "vuex"

//获取store
const store=useStore();
const count =ref(0);
//获取store状态
const type =store.state.type
//给count赋值
count.value=1;

</script>

2.vue3 用router 和 route

javascript 复制代码
<script setup>
import {useRoute,useRouter} from "vue-router"
const route =useRoute();
const router=useRouter();
//获取参数
const type=route.params.type;
//跳转到新的浏览器窗口
function goNewtab(){
const {href} = router.resolve({
	path:'/basic_wx/form'})
	window.open(href, "_blank")
}
</script>

3.vue3 使用 ref

javascript 复制代码
<script setup>
import {ref} from "vue"
const count =ref(0);
//给count赋值
count.value=1;

</script>

4.父子组件通讯

javascript 复制代码
//子组件
<script setup>
import {ref} from "vue"
const count =ref(0);
//引入父级方法
const emits=defineEmits(['getTable'])
//属性props 子级使用父级参
defineProps({
reqParams:Object
});
//显示的指定要暴露出去的属性
defineExpose({
getData,
count
})
//调用父级方法
emits("getTable")
function childMethod(){

}
</script>

//父组件
<script setup>
import {ref} from "vue"
const childDom=ref(null)
import childCom from './childCom.vue'
const reqParams=ref({})
function getTable(){
//方法代码
}
//调用子组件方法
childDom.value.childMethod()
childDom
</script>
<template>
<childCom ref="childDom" :reqParams='reqParams' @getTable="getTable"></childCom>
</template>
相关推荐
Spider_Man3 分钟前
🎭 React受控与非受控组件:一场"控制权"的争夺战
前端·react.js
Mintopia8 分钟前
LOD:图形世界里的 “看人下菜碟” 艺术
前端·javascript·计算机图形学
黑客老李10 分钟前
EDUSRC:智慧校园通用漏洞挖掘(涉校园解决方案商)
服务器·前端·网络·安全·web安全
Code季风10 分钟前
SQL关键字快速入门:CASE 实现条件逻辑
javascript·数据库·sql
拾光拾趣录11 分钟前
Vue依赖收集机制:响应式原理的核心实现
前端·vue.js
Mintopia12 分钟前
Three.js ArrowHelper:三维世界里的 “方向向导”
前端·javascript·three.js
归于尽13 分钟前
浏览器和 Node.js 的 EventLoop,原来差别这么大
前端·node.js·浏览器
雲墨款哥14 分钟前
Vue 3 路由管理实战:从基础配置到性能优化
前端·vue.js
Jacob023418 分钟前
JavaScript 模块系统二十年:混乱、分裂与出路
前端·javascript
独立开阀者_FwtCoder23 分钟前
Vite Devtools 要发布了!期待
前端·面试·github