目录

1 从data,methods到setup

超级NB的写法

2 使用props、emit和context

使用props

使用emit

3 路由变化

4 变量初始化的变化

---

1 从data,methods到setup

<script>
export default {
  components:{
    NPagination:NPagination,
  },
  name: "MyPaging",
  setup(){
    //基本数据类型使用ref
    //其他类型使用reactive
    const currentPage=ref(1);
    const totalCount=ref(100);
    const pageSize=ref(100)
    function pageF(){
      if (currentPage.value)
      {
        alert(currentPage.value)
      }
    }
    return{
      currentPage,
      pageSize,
      totalCount,
      pageF,
    }
  }
}
</script>

超级NB的写法

使用标签中的setup语法糖

<script setup>

</script>

作用：

1 使用后，引入普通的组件无需注册组件就可以使用了

2 无需一个个返回setup中的东西了

3 无需定义暴露当前组件的名字，会默认使用当前的文件名作为暴露的组件的名字！！

<script setup>
import {NPagination} from "naive-ui"
import {ref} from "vue";
const currentPage=ref(1)
const totalCount=ref(100)
const pageSize=ref(100)
function pageF(){
  if (currentPage.value)
  {
    alert(currentPage.value)
  }
}
</script>

兄弟们!!是不是吊炸天了！！！

2 使用props、emit和context

使用props

父组件

  <my-paging :cs="111"></my-paging>

子组件

<template>
    <n-pagination/>
</template>

<script setup>
//使用props
const mycs=defineProps({
  "cs":Number
});
alert(mycs.cs)
</script>

<style scoped>

</style>

结果： 

使用emit

1 父组件

<MyPaging :cs="111" @click-page="mydata"></MyPaging>

<script setup>
const mydata=(data)=>{
  alert(data)
}
</script>

子组件

<template>
    <div @click="ceclick()" style="width: 1000px;background-color: #fecfef;height: 1000px"/>
</template>

<script setup>
//使用emit
//定义emit
const myemit=defineEmits(["click-page"])
function ceclick(){
  myemit("click-page","我是子组件的数据！")
}
</script>

<style scoped>

</style>

效果：

 

3 路由变化

Vue2 路由的使用

const path = navigator.userAgent.match(/(phone|pad|pod|iPhone|iPod|ios|iPad|Android|Mobile|BlackBerry|IEMobile|MQQBrowser|JUC|Fennec|wOSBrowser|BrowserNG|WebOS|Symbian|Windows Phone)/i) ? 'mobile/' : 'pc/'         
console.log(path)           
export const  data={        
    routes: [               
        {                   
            name: "index",  
            path: "/",      
            component: MyIndex=>{require([`@/components/MyPage/${path}MyIndex`],MyIndex)},    
            meta: {title: "xx"}             
        }]  
}

import VueRouter from "vue-router";                                         
import axios from "axios";                                                  
import {data} from "@/routers/details";                                     
//创建路由                                                                
const MyRouter = new VueRouter(data)                                                                                                                                                                                                   
export default MyRouter;   

Vue3中的使用：

const path = navigator.userAgent.match(/(phone|pad|pod|iPhone|iPod|ios|iPad|Android|Mobile|BlackBerry|IEMobile|MQQBrowser|JUC|Fennec|wOSBrowser|BrowserNG|WebOS|Symbian|Windows Phone)/i) ? 'mobile/' : 'pc/'
console.log(path)
export const  data={
    routes: [
        {
            name: "index",
            path: "/",
            component: MyIndex=>{import([`@/components/MyPage/${path}MyIndex`],MyIndex)},
            meta: {title: "xx"}
        }]
}

import VueRouter, {createRouter, createWebHistory} from "vue-router";
import axios from "axios";
import {data} from "./details";
//创建路由器
const MyRouter = createRouter({
    history: createWebHistory(),
    data
})
export default MyRouter;

主要的变化是:

1 路由创建：createRouter()({

参数

})

2 组件引入：import(xx) 

4 变量初始化的变化

vue2

data(){
  return{
    name:"zs",
    age:12,
    city:{
    "sh":"上海",
    "bj":"北京"
    }
  }
}

vue3

const name=ref("zs");
const age=ref(12);

const city=reactive({
  "sh":"上海",
  "bj":"北京"})

总结：
简单类型使用ref()初始化

复杂类型使用reactive初始化