vue3使用小结
从vue中导入要使用的api
//vue3中 所有功能都是按需引入 ts语法检测会检查出没有使用的引入模块
import {defineComponent} from "@vue/componsition-api"
import {ref,reactive,onMounted} from 'vue'
export default defineComponent({
setup(){
//创建一个 '键值对'
const id = ref(0)
id.value = 2
const obj = ref({})
const isShow = ref(true)
//创建一个数据集合
const listRes = reactive({
list:[],
time:12,
res:{}
})
function con(){
console.log(1997)
}
onMounted(()=>{
con()
})
return{
...toRefs(listRes),id,isShow
}
}
})
//页面中的使用
<div>{{id}}</div>
<input v-module="time"></input>
使用组件
- 创建并引入组件leftView
import {defineComponent} from "@vue/composition-api"
import leftView from './leftView'
export default defineComponent({
components:{
leftView
},
//setup在beforeCreate() 之前执行
setup(){
}
})
-
父组件传递参数给子组件
<leftView :id="id"></leftView>
子组件接受参数:
export default defineComponent({ props:{ id: String }, setup(props,context){ //props.id 拿到接收的参数 不用this vue3中没有this console.log(props.id) } })
-
子组件传递参数给父组件 通过事件
<leftView @sendId="sendId"></leftView> //父组件中创建sendId事件 sendId(id){ console.log(id) } //子组件中监听sendId事件 发送参数 export default defineComponent({ props:{ id: String }, setup(props,context){ function btnClick(){ context.emit('sendId',123) } } })
watch 监听数据
import {watch} from "vue"
export default defineComponent({
setup(props,context){
watch(()=> props.id,(val)=>{
//监听到接受参数id 的变化
console.log(val)
})
}
})
vuex的使用
-
新建store文件夹和 index.ts文件
//index.ts import {createStore} from 'vuex' export default createStore({ state:{ time:'' }, mutations:{ watchTime: function(state,params){ state.time = params.time } } })
-
在main.js中引入创建好的store文件 并挂载到vue
imoprt store from './store' import {createApp} from 'vue' const app = createApp(App) app.use(store)
-
页面中使用
import {useStore} from "vuex"
setup(){
const store = userStore()
const state = store.state
//读取vuex中的数据
console.log(state.time)
//写入 改变vuex中的数据
store.commit('watchTime',{time:123})
}
router路由的使用
-
注册页面
import {createRouter,createWebHashHistory,RouteRecordRaw} from 'vue-router' import Home from '../view/Home.vue' const routes: Array<RouteRecordRaw> = [ { path:'/', name: 'Home', component: Home }, { path:'/index', name:'index', component: () => import('../view/index/index.vue') } ]
-
路由传参
{ path:'/index', name:'index', meta:{ id:'123' }, component: () => import('../view/index/index.vue') } //index.vue中 import {useRoute} from "vue-router" setup(){ const route = useRoute(); console.log(route.meta.id) //跳转页面 }
-
路由跳转
import {useRouter} from "vue-router" setup(){ const router = useRouter() functio btnClk(){ router.push('../index/index.vue') } }