Vue3 语法糖的基本使用总结——ref，reactive，toRef，toRefs，props，emit

提示：Vue3 语法糖使用总结

---

前言

vue3 setup() 函数使用在结尾

---

提示：以下是本篇文章正文内容，下面案例可供参考

一、语法模板

1. 组件加载时自动渲染第一层
2. 不需要返回定义
3. 使用组件时不需要注册

<template>
    <div>
        <h1>{{ leng }}</h1>
   </div>
</template>
<script setup> 
import { ref } from 'vue'
const leng = ref(100)
</script>

---

二、响应式

1. ref

1. 被 ref() 函数包裹的变量才具有响应式
2. 使用之前需要导入 import { ref } from ‘vue’
3. 括号里面的值为初始值
4. 被 ref() 函数包裹的变量需要 " .value " 才能获取到值和修改值
5. 推荐单个变量使用 ref() 函数，如count 等，不推荐定义对象，如forms, tableData

代码如下（示例）：

<template>
    <div>
        <h1>{{ count}}</h1>
        <button @click="addCount">count ++</button>
   </div>
</template>
<script setup> 
import { ref } from 'vue'
// 1：定义
const count= ref(100)
// 2：更改数值
function addCount(){
    count.value ++;
}
</script>

2. reactive

1. 定义：
   let tableData = reactive([ ])
   let forms = reactive({ })

2. 使用：直接在模板使用

3. 不需要 tableData.value 的形式，可直接赋值

4. 使用之前需要导入 import { reactive } from ‘vue’

代码如下（示例）：

<div>
        <el-table :data="tableData" style="width: 100%">
            <el-table-column prop="username" label="姓名" width="100" />
            <el-table-column prop="password" label="密码" width="250"/>
        </el-table>
</div>


<script setup>
import { reactive } from 'vue'

// 1：定义
let tableData = reactive([{
	username: '张三',
	password: '123'
}])

// 2：重新赋值 （函数，后端请求数据赋值）
function getAll() {
    api.users.user_get().then( res => {
        tableData = res.data.data  // 直接可以赋值
    })
}

---

三、toRef 和 toRefs

1、toRef

1. 作用：变量的子级变量别名。（如何理解？看以下代码示例）
2. 需要引入 import { reactive, toRef } from ‘vue’
3. 变量 count 没有使用 ref() 函数包裹，使用的是 reactive() 函数

使用： let count = toRef(obj, ‘count’)

上面说到 setup 自动返回第一层，如下代码，将count 定义在变量 obj 之下，就成了变量 obj 的子级变量，组件加载时，会返回 obj, 无法返回 count, 此时无法获取 count 变量，则使用变量时需要 obj.count 才能获取到值，toRef() 函数的作用就是将 obj下的count 提取出来，方便直接使用变量count, 避免obj.count 的写法。

代码如下，示例：

<template>
    <div>
        <h1>{{ count}}</h1>
        <button @click="addCount">count ++</button>
   </div>
</template>

<script setup> 
import { ref, toRef } from 'vue'

// 1：定义,
let obj = reactive({
	count: 100
})

// 2：toRef
let count = toRef(obj, 'count')  // 将对象obj,和变量名作为参数

// 3：修改，仍然通过属性名.value 的形式修改
function addCount(){
    count.value ++;
}
</script>

---

2、toRefs

1. 与 toRef() 效果一致，区别可以多个导出
2. 需要引入 import { reactive, toRefs } from ‘vue’

使用： let { tableData, count } = toRefs(obj)

<script setup> 
import { ref, toRef } from 'vue'


const obj = reactive({
    tableData: [],  // 数组对象
    count: 10,      // 普通变量
})

// 使用 toRefs
let { tableData, count } = toRefs(obj) // 把第一层对象obj 作为参数即可

// 修改数据
	// 同样需要调用  .value 
tableData.value = ???
count.value = ???


</script>

---

四、props 和 emit()

1. props : 组件传讯
2. emit ：事件

1、props

代码示例，如下：

父组件

使用：User msg=“Hoell Word” age=18 :user=“obj.user” />

<User msg="Hoell Word" age=18 :user="obj.user" />

<script setup>
import { reactive } from 'vue'
const obj = reactive({
    user: {
		username: '张三',
		password: '123'
	}
})
</script>

---

子组件

使用： defineProps 函数

// 获取数据
<script setup>
import { onMounted } from 'vue'

// 1: 需要定义
const props = defineProps({    // defineProps：不需要引入；props：可自定义
    msg: String
    age: int
    user: Object
})

// 2： 输出，查看是否获取到
onMounted(() => {			// onMounted ： 生命周期方法
    console.log(props.age, props.msg, props.user);
})
</script>

---

2、emit

父组件

使用： @getInfo=“datas”

<User msg="Hoell Word" @getInfo="getInfo" />  // 事件名

<script setup>

 let getInfo= function(info) {
     msg.value =  info// 获取子组件数据 
 }
</script>

---

子组件

使用： defineEmits

1： defineEmits([‘getInfo’， ‘hello’] ) : 可以传多个

// 这个 getInfo 可以自定义，方法名而已
<el-button @click="getInfo">传输</el-button>

 <script setup>
 
 // 1：注册事件
 let emit = defineEmits(['getInfo'])
 
  let getInfo= function() {
  	  // 2：使用
      emit('getInfo', "传输的信息")   // getInfo: 父类定义点击事件名，不是方法名
  }
  

</script>

---

五、router

使用引入：import { useRouter } from “vue-router”

<script setup>
// 1:引入
import { useRouter } from "vue-router"
// 2: 定义
const router = useRouter()
// 3: 使用
router.push({
        path: '/home',		// 路由路径
        name: 'home',		// 路由名称
        query: {			//	参数
            msg: 'hello'
        }
})

// 4: 简写
router.push('/home')

</script>



// 5：按钮绑定
<el-button type="danger" @click="$router.push('/index')">Go Index</el-button>

---

setup() 函数的使用

1. 与语法糖不同的是，在函数内部，需要返回定义
2. 变量和函数均要定义，不返回组件加载无法找到

模板语法

<template>
    <div>
        <h1>{{ count}}</h1>
        <button @click="addCount">count ++</button>
   </div>
</template>

<script> 
	import { ref } from 'vue'
	
	setup() {
	// 1：定义
	const count= ref(100)
	
	// 2: 函数
	function addCount(){
	    count.value ++;
	}

// 3: 返回, 变量和函数均要定义，不返回组件加载无法找到
	return {
		count,
		addCount,
  	}
}
</script>

总结

先分享到此，基本使用，后续再跟新。。。