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>