vue3.0基础

vue3.0基础

以上为博客园里讲解不错的vue3.0基础知识点,可快速浏览,熟悉基本语法,但正式开发中我们并不推荐使用vue2.0的export写法,而采用setup的语法糖形式进行vue3.0的开发,例如

<script setup>
    import {  ref,reactive } from 'vue';
    const number = ref(0)
    const menuList = reactive({
        baseData:[]
    })
</script>

---

vue3.0补充

父传子:

//父:
import popupDialogBox from "./twelveComp/index.vue";
<popupDialogBox v-model:show="show" ref="dialogBox"/>

//子:
import { defineProps } from 'vue';
const emit = defineEmits(['update:show']);
const props = defineProps({
  show: {
    type: Boolean,
    default: false,
  },
});
​
const handleChange = () =>{
 emit('update:show', false)
}
handleChaneg()
​

tip:标签上引用数据,可以直接用show,在方法里必须有变量接收,譬如:props.show

---

子传父:

//子:
import { defineEmits } from 'vue';
const emit = defineEmits(['update:show','refreshData']);
​
const closeDialog = () => {
  //传值
  emit('update:show', false);
  //调用方法
  emit('refreshData');
};

父:
//父组件值
<popupDialogBox v-model:show="show" ref="dialogBox"/>
//父组件方法    
<TimeHint
    class="time-hint"
    @refreshData="getPlayListDetail(buttonIndex)"
/>

---

ref

//父:
<popupDialogBox v-model:show="show" ref="dialogBox"/>
     
const dialogBox = ref(null);
​
const handelRule = ()=>{
  show.value = true;
  dialogBox.value.getList();
};

//子:
import {  defineExpose } from 'vue';
defineExpose({
  getList,
});

---

vuex: pinia

main.js 挂载pinia

import { createApp } from 'vue'
import { createPinia } from 'pinia'
import App from './App.vue'

const pinia = createPinia()
const app = createApp(App)

app.use(pinia)
app.mount('#app')

 store/index.js 定义一个store

/*
 *store/index.js
 *vue3.0 pinia已经替代了vuex,相比vuex,pinia更加强大
 */
import {defineStore} from 'pinia';
import {getBoxConfig} from '@/netWork/guardBox';
export const useStore = defineStore('main', {
    state:()=>({
        all_config:{
            date_range:[]
        }
    }),
    actions:{
        async getConfig(level = 1){
            const {data} = await getBoxConfig(level);
            this.all_config = data.all_config;
            return data;
        }
    }
});

 homepage.vue 引用状态管理器的页面

import { useStore } from '@/store';
const store = useStore();

//获取盒子配置
const getConfig = async () => {
  const data = await store.getConfig(tabItemIndex.value);
  boxConfig.value = data.gift_info;
  //默认选中第一个开盒礼物
  if (data.gift_info.length !== 0) {
    giftInfo.value = data.gift_info[0];
    giftIndex.value = data.gift_info[0].gift.id;
  }
  numIndex.value = 1;
};

getConfig();

---

watch :

监听对象的某个属性 , 第一个参数应该传入一个函数表达式

import { reactive, ref, watch } from "vue";
watch(() => dataInfo.switchIndex, (newVal, oldVal)=>{
  prizeName.value = taskData.taskInfo[newVal].prize_info.name;
},
{
  immediate: true, // 立即执行
  deep: true // 深度监听
});

---

computed:

import { ref, computed } from 'vue'
const count = ref(0)
const doubleCount = computed(() => count.value * 2)

---

Route:

import { useRoute } from 'vue-router';
const route = useRoute();
const { roomId, moduleId } = route.query;

---

Router:

import { useRouter } from 'vue-router';
const router = useRouter();
const handleJump = ()=>{
	router.push({
    	path:'/rule',
        query:{
            id:5,
            nickname:'zero'
        }
    })
}