【3】vue3语法
【一】vue前提
【1】定义变量
-
# 1 const是常量--》不允许变的 # 2 咱们用 ref包裹后,是个对象,虽然对象是常量,对象不能变,对象.value可以变化 # 3 之所以定义成const原因是,后期不能修改对象 【对象.value可以改】 # 4 如果用let声明 ,后期修改对象不会报错,导致程序出问题
【2】js代码组合式
-
# 组合式和配置项能不能混用? -可以混用 -并且在配置项api的方法中,可以拿到setup函数中定义的变量 -以后只用一种 -配置项 -组合式(推荐的)
【二】setup函数
【1】setup介绍
-
setup用于script中,书写组合式代码,将变量和方法都当放入setup函数中,并且把数据要return出去,就直接可以在tenmplates中使用
-
<script> let app=Vue.createApp({ setup() { //---------------放变量和方法--------------- let count=Vue.ref(0) let a=10(不包裹的) let handleAdd=()=>{ count.value++ } //-----------将变量和方法return出去-------- return { count, handleAdd, a }}, }) app.mount("#app") </script>
【2】setup另一种用法
-
<script setup> </script>
-
这样写,就可以直接定义函数和变量,不需要返回;组件只需要导入,不需要注册
<script setup> import HelloWorld from '@/components/HelloWorld.vue' import AboutView from "@/views/AboutView.vue" import {ref} from "vue"; //定义值类型 const count=ref(0) function add(){ count.value++} //其他方法,正常写 watch(...) </script>
【三】响应式ref和feactive
- 如果不包裹,数据会改变,但是在前端不会显示,只有响应式的数据才会在界面实时更新变化
- 不包裹,就是
(1)包裹
- ref包裹值类型(数字,字符串,布尔),变成响应式
- reactive包裹引用类型(对象,数组),做成响应式
(2)操作
- ref包裹的,需要.value才能操作值(因为变成一个object类型了)
- reactive包裹的,直接操作
(3)template使用
-
和平时一样,ref包裹的不用.value
-
示例
<template> <div class="about"> <h3>{{count}}</h3> <button @click="add">点我加1</button> <h3>{{user_info.username}}</h3> <button @click="changename">点我切换名字</button> </div> </template> <script> import {ref,reactive} from "vue"; export default { name:'AboutView', setup(){ //定义值类型 const count=ref(0) function add(){ count.value++ } //定义引用类型 const user_info=reactive({username:'zhou',age:18}) function changename(){ user_info.username='zhou2' } //所有都return出去 return {count,add,user_info,changename} }} </script>
【四】组件间通信
【1】父传子defineProps
-
父组件
---html(父亲提供信息msg,儿子提供变量msg_s) <HelloWorld :msg_s="msg"></HelloWorld>
-
子组件
---js(儿子传递信息msg_s defineProps({ msg_s: String,})
【2】子传父defineEmits
-
父组件
--html(具有中间函数) <HelloWorld @send="handleReceive"></HelloWorld> <p>父组件中得name:{{name}}</p>
--js(父亲定义接收函数handleReceive) <script setup> const name = ref('') function handleReceive(a){ name.value=a } </script>
-
子组件
--js(定义发送函数send) let $emit = defineEmits(['send']) # 等同于之前的 this.$emit const name =ref('') const handleSend=()=>{ $emit('send',name.value) }
【五】插槽
【1】默认插槽
【2】剧名插槽
<templates></templates>--slot插槽
<style> </style>---scope控制范围
<script> </script>---setup放函数和变量
#js中
【data】---const定义变量(类型ref和reactive)
【methods】
--子传父:父亲接收的函数中$emit
--
【属性】
--计算computed(值变化就启动)
--监听watch(监听新老值变化)
--局部组件 commponts
--混入mixin(抽取公共代码)
--props(父传子,儿子接收)
#插件
--自定义export default{ install(Vue){..
--然后import
#路由
--路由跳转this.$router.push()
--路由守卫router.beforeEach
--本地路由this.$route