2021-08-15

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