【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_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