【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