VUE笔记--响应式数据的使用

🤚我的博客

• 欢迎光临我的博客：https://blog.csdn.net/qq_52434217?type=blog

🥛前言

准备写一写我正在做的项目的笔记，但是思来想去不知道怎么下笔。总感觉写笔记很费时间和精力，但是实际在做项目的过程中确实遇到不少的问题，所以决定边做边写。既然是边做边写就难免会漏写一些知识点，所以我只能尽可能的梳理一些在项目中遇到的问题和难点。后续会更新更多的前端知识点如vue-router、pinia、element-plus、参数校验、瀑布流布局和更多后端知识如jwt的使用、自定义拦截器、自定义注解AOP、异步操作等等。我还打算在自己的项目中加入在线聊天、在线支付、在线直播等功能，不过也需要看我的精力了。废话少说，如果这篇笔记有幸成为你的学习内容并且有什么不懂的，可以直接评论或者私信留言。

ref的使用

响应式变量

ref是vue框架中的核心响应式组件和api，通过ref定义的变量可以被js动态修改变量值。ref是vue包中的一个函数，在声明之前需要导入相应的依赖包。本篇笔记的案例均是在项目实践中的代码，且本人采用的是ts+组合式。响应式数据应按照如下形式定义。

import { ref } from 'vue'

const count = ref<number>(0)

变量声明后可以在js中通过count.value的形式调用，而在template中可以直接使用变量名调用。这里以点击按钮自动增加count值为例，这个例子也是初始化vue成功后网页中的例子。

<script setup lang=ts>
function increase(){
	count.value++;
}

</script>
<template>
	<div @click="increase()">{{count}}</div>
</template>

响应式组件

在vue中，除了使用v-model的方式双向绑定变量外，还可以通过ref的方式访问组件的内容。之所以能够通过ref访问组件的内容，是因为带有ref的组件或者dom是可以直接在ts中访问整个元素的属性。通过ref定义的变量的使用方法与响应式变量没有任何区别。

<script setup lang="ts">  
import {ref} from 'vue'  
const text = ref("text");  
function showText(){  
  console.log(text.value)  
  console.log(text.value?.value)  
}  
</script>  
<template>  
  <div>  
    <input ref="text" placeholder="输入姓名" @change="showText()">  
  </div>  
</template>  
  
<style scoped>  
  
</style>

props组件

在某些场合，我们需要通过父组件向子组件传递参数，这个时候就需要使用props为父子组件提供桥梁。子组件中通过defineProps()宏定义出变量后，可以动态接受父组件传入的属性。

在子组件定义时尽量采用驼峰式命名风格，同时在父组件中要用-连接两个单词！！！！

简单使用

这里在定义一个子组件Child.vue

<script setup lang="ts">  
const props = defineProps({  
  msg:String  
});  
</script>  
  
<template>  
  <div class="child">  
    Child: hello {{msg}}  
  </div>  
</template>  
  
<style scoped>  
  
</style>

然后在父组件中调用子组件并传入一个值

<script setup lang="ts">  
import Child from "./components/Child.vue";  
  
</script>  
<template>  
  <Child :msg="'china'"></Child>  
</template>  
  
<style scoped>  
  
</style>

效果如下

动态更新

假设现在我们有一个需求是在父组件中输入一个名字name，子组件输出child:hello name，而且子组件可以根据父组件输入的内容更新。这时我们需要重新定义一个值用于接收input.value的值。

父组件

<script setup lang="ts">  
import {ref} from 'vue'  
import Child from "./components/Child.vue";  
const text = ref("text");  
const child = ref("child");  
const china = ref("");  
function showText(){  
  console.log(text.value)  
  china.value = text.value.value  
}  
</script>  
<template>  
  <div>  
    <input ref="text" placeholder="输入姓名" @change="showText()">  
  </div>  
  <Child ref="child" :msg="china"></Child>  
</template>  
  
<style scoped>  
  
</style>

效果如下

参数校验

props的参数校验是指在父组件传入到子组件时可以进行参数格式的校验，如类型校验、长度校验等。

const props = defineProps({
	nickname:String,
	phone:{
		type:String,
		required:true
	},
	email:{
		type:String,
		validator(value, props) { // The value must match one of these strings 
		regx = /^\w{3,}(\.\w+)*@[A-z0-9]+(\.[A-z]{2,5}){1,2}$/;
		return regx.test(value)
		}
	},
	password:{
	type:String,
	default:"admin",
	},
	config:{
	type:Object,
	default(rawProp){
			return {url:'https://example.com',data:rawProp}
		}
	}
})

v-model

v-model是响应式数据与组件之间的绑定。该变量可以随着绑定的input框的输入内容而变化。v-model不仅可以在普通dom中使用，也可以在父子组件上使用。

dom中使用

在该例中通过defineModel定义了一个绑定，但是在普通dom中这样的定义非必要的。在普通dom中只需要通过
ref()定义即可，可以根据自己的喜好决定。

<script setup lang="ts">  
const msg = defineModel('msg')  
</script>  
  
<template>  
  <input v-model="msg" />  
  <div>{{msg}}</div>  
</template>  
  
<style scoped>  
  
</style>

父子组件

这里与普通的dom中使用有些许差别：在v-model后面添加了参数，用于指定绑定的对象。

<script setup lang="ts">  
import {ref} from 'vue'  
import Child from "./components/Child.vue";  
const china = ref("");  
</script>  
<template>  
  <div>{{china}}</div>  
  <Child v-model:msg="china" @change="console.log(china)"></Child>  
</template>  
  
<style scoped>  
  
</style>

emits

有的场合需要通过子组件向父组件传递事件。假设目前我们有一张用户列表，而列表中的每一个元素都是子组件。当我们将鼠标移动到每一个单独的元素时，父组件就发送请求根据子组件中的用户id发送请求获取更多的信息。

这个过程首先子组件需要一个鼠标监听事件，其次需要将鼠标事件传递给父组件，父组件接收到事件信号获取用户id发送请求。而在这个过程中的重点就是如何传递事件信号。

emits与model和props的定义相似，通过defineEmit()函数即可定义。而在父组件中接收则是直接采用@+事件名进行监听。

子组件

<script setup lang="ts">  
const emits = defineEmits(['getDetail'])  
function getDetail(id) {  
  emits('getDetail',id)  
}  
</script>  
  
<template>  
  <div class="list" @mouseenter="getDetail(1)">  
    <div>id:1</div>  
  </div>  
</template>  
  
<style scoped>  
  
</style>

父组件

<script setup lang="ts">  
import Child from "./components/Child.vue";  
</script>  
<template>  
  <Child @getDetail="console.log('send ajax')"></Child>  
</template>  
  
<style scoped>  
  
</style>

END

本章就介绍到此，后面将会按照项目内容和搭建顺序介绍项目中的技术重点和难点。

公众号

更多内容请关注小夜的公众号，将持续更新java spring全家桶，vue全家桶，python数据分析与爬虫以及js与爬虫逆向。
欢迎关注小夜的公众号

---