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:

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((swipeIndex), (newVal, oldVal)=>{
  prizeName.value = taskData.taskInfo[newVal].prize_info.name;
});

---

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'
        }
    })
}