vue3 setup语法糖 常用操作

废话不多说，上代码
1、使用scss深度修改vant3样式

:deep(vant组件类名) {
	// 相关样式操作
	color:red !important;
}

2、父组件调用子组件方法或者变量

// 父组件
// 引入子组件 DOM
<childBox ref="childBox"   />

//JS  ref需和变量同名
const childBox= ref(null)
// 操作
childBox.value.方法名()   或者  childBox.value.变量名

// 子组件 
const closePopup = () => {
  // 基本操作
};
defineExpose({ closePopup });

3、子组件调用父组件方法传值

 // 父组件
 <childBox  @getFather="getFather"   />
const  getFather = () => {
	// 操作
}

// 子组件
const emit = defineEmits(["getFather"]);
// 调用
emit("getFather");

4、父组件传值子组件

import {ref} from 
// 父组件
<childBox  :msg="msg"   />

//js
const msg = ref('')

// 子组件
// props 接收   注：接收数组或对象需默认值需返回空数组或空对象
const props = defineProps({
  msg: {
    type: String,
    default: '',
  },
});

5、路由传值
注：query 与 params 的区别
解：params类似于post，query更加类似于我们ajax中get传参，说的再简单一点，前者在浏览器地址栏中不显示参数，后者显示，所以params传值相对安全一些。query 在刷新页面得时候参数不会消失，而 params 刷新页面得时候会参数消失。

// A页面
import { useRouter } from "vue-router";
const router = useRouter();

// 跳转
router.push({path:'/页面',query:{
    id:id
  }})

// B页面
import { useRouter } from 'vue-router'
const router = useRouter();
// 接收传值
router.currentRoute.value.query.id

6、监听vuex的state的值并修改state

// order.js  store
// 引入pinia
import { defineStore } from 'pinia' 
export const useStore = defineStore({
  id: 'useStore',
  state: () => ({
    id:''
  }),
  actions: {
    changeId:function(id) {
      this.id= id
    }
  }
})

引入vue与vuex
import { computed,watch } from "vue";
import { useStore } from "@/stores/order";
const detailStore = useCsoDetails();

//js
//computed 接收一个回调函数，返回一个通过其他属性经过计算的新值并且这个新值是通过 ref 包装过的常量
const geId = computed(()=>{ 
	//返回的是ref对象
	return useStore.Id;
})
//监听 id
watch(geId , (newVal, oldVal) => { // 监听modalityId
	console.log(newval+"新的id")
}, {immediate:true,deep:true});

 // 调用action修改id
const  setId = () => {
	useStore.changeId(valData.id);
}

此文章可参考，如有问题及时修改，后续慢慢更新。