vue3 setup语法糖中组件之间通讯以及vuex的使用以及数据监听，路由跳转传参等基础知识点

如果你看了上一关于3.2项目的搭建，看看玩这篇这些常用的知识点，那基本可以进入项目实战

上一篇vue3.2系统搭建

vue 从2到三的变化，其实只有很小的差别，可能就是你写习惯2，现在来写3,有那么一点不习惯而已。
在我们日常开发过程中，常用的知识点
1路由的跳转传参
2组件通讯
3.vuex状态管理
4.数据监听
等等，其他的就是一些数据处理，数据的组装

1.路由的跳转传参 使用

<template>
   <el-button type="info" @click="goDetail">路由跳转传参</el-button>
</template>
//l路由引入
import { useRoute, useRouter } from "vue-router";
const router = useRouter();
<script setup>
const goDetail = () => {
  router.push({
    path: "./h",
    query: {
      id: 12,
    },
  });
};
</script>

//其他页面接受方式  当然你也可以是params的方式
<script setup>
import {useRoute} from 'vue-router';
const route = useRoute();

//获取路由参数
console.log(route.query.id); //12
</script>

2组件通讯

//父组件

<template>
  <div>
  
   <myEmits mes1="abcd" @as="changeParent1" @ad="changeParent2" />
   <p>我是父组件，子组建修改父组件的值为{{parentValue}}</p>

  </div>
</template>
<script setup>
//内置
import { ref} from "vue";

//组建使用
import myEmits from './emits.vue'

//响应式数据
const parentValue = ref("");

///方法methods
const changeParent1 = (params)=>{
    parentValue.value= params;
}
const changeParent2 = (params)=>{
    parentValue.value= params;
}

</script>

<style  scoped>
nter;
}
</style>>

//子组件

<template>
  <div class="container">
          <el-button type="success" @click="handleClick">给父组件传值</el-button >
          <div>我是子组件，这里是父组件传递过来的值----{{msg}}</div>
          <el-button type="info" @click="handleClick1">给父组件传值按钮2</el-button >
  </div>
</template>

<!--vue3的父子组件传值(emits.vue)-->
<script setup>
import { ref,toRef } from 'vue'  

const props = defineProps({
  mes1: String,
});

//注意这里要是 `toRef` 来处理msg1,
const msg = toRef(props, 'mes1');
// emit
const emit = defineEmits(["as","ad"]);
// methods
const handleClick = () => {
  emit("as", Math.random());
};

const handleClick1 = () => {
  emit("ad", "nide");
};
</script>

其实记住 defineProps接收， defineEmits用来发送

3.vuex状态管理
这个莫非也就是 取数据，修改数据的问题，

import { createStore } from 'vuex'
 
const store = createStore({
  state: {
    userInfo: {
      name:'weblzr'
    }
  },
  mutations: {
   
    sername(state, name){
      state.userInfo.name = name
    }
  },
  actions: {
   
  },
  getters: {
  
  }
})
 
export default store

比如我们需要使用name ，在对应vue文件中

 <p>直接取值 <span style="color:red">{{$store.state.userInfo.name}}</span></p>

修改

 <el-button  @click="setname">修改vuex名字</el-button>
 
<script setup>
import { ref, onMounted,watch} from "vue";
//状态vuex
import { useStore } from 'vuex'
const store = useStore()

const setname=()=>{
   store.commit('sername',"冰冰")
}

</script>

或者使用 dispatch操作 actions 来改变数据，不依依说，
这边文章写的很详细，模块拆分，辅助函数等等
vuex进阶传送门

修改数据监听取值

<p>监听值取值 <span style="color:red">{{name}}</span></p>

<script setup>
//内置
import { ref, onMounted,watch} from "vue";

//状态vuex
import { useStore } from 'vuex'
const store = useStore()

//响应式数据
const name = ref(store.state.userInfo.name);

//监听
watch(()=>store.state.userInfo.name,(newVal, oldValue)=>{
    name.value =newVal;
})

</script>

也可以使用computed结合watch 来监听数据变化
computed watch 来监听数据变化

至于其他知识点不依依细说，大同小异而已，掌握基本的基本够用。