【3.0】vue3语法
【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_sdefineProps({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.$emitconst 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