vue3组件内写法的变化(核心篇2)——vue2和vue3的基础用法对比第五篇

组件中的使用：常用属性、方法等的对比

(1) 生命周期 (2) 变量的定义与使用 (3) 方法的定义与使用 (4) 父子组件间的数据交互  (5) computed计算属性和watch的使用

其中(1)(2)(3)已在上篇文章中介绍，本篇文章将介绍(4)、(5)

(4) 父子组件间的数据交互

写法基本没变，只是子组件接收的方式有小变化，所以vue2的写法就不具体描述了

1) 父传子 props用法

vue2在子组件的写法，是声明了传值的属性名后在方法中用 this.传值的属性名 就可以使用了，

只有这点与vue3有区别其它的都一样，下面为vue3写法。

父组件中：<子组件名称 
　　　　　　传值的属性名="传值的值" 
　　　　　　传值的属性名2="传值的值2"
　　　　　/>

在子组件中：
<template>
　　{{传值的属性名}}
</template>
1.普通写法
<script>
export default defineComponent({　　
　　// 对传的值不限制
　　props：[传值的属性名,传值的属性名2] 
　　// 对传的值进行限制
　　props：{
　　　　传值的属性名：{
　　　　　　type：number, // 值的类型
　　　　　　default：100, // 默认值
　　　　}，
　　　　传值的属性名2：{
　　　　　　type：number，
　　　　　　required:true, // 是否必传
　　　　}
　　}
　　// 注意props不能结构，不然会破坏其响应性
　　// 从这个里开始vue2和vue3有区别,其他的都一样
　　set(props){ 
　　　　props.传值的属性名 
　　　　props.传值的属性名2 // 使用
　　}
}
</script>
2.使用setup语法糖
<script setup>
defineProps([传值的属性名])
defineProps({
　　传值的属性名:{
　　　　type:number,
　　　　required:true
　　}
})
调用直接写传值的属性名就行。如传的是list ，就直接写list就是使用了
</script>

 

2) 子传父 emit用法；

在vue2中是直接在子组件中用 this.$emit(传值的方法名,参数) 就调用了，

不用声明什么，这点和vue3有点区别，下面为vue3写法。

父组件中：<子组件名称 
　　　　　　@传值的方法名="父组件中的函数" 
　　　　　　@传值的方法名2="父组件的函数2"
　　　　　/>

在子组件中：
1.普通方式
<script>
export default defineComponent({　　
　　emit：[传值的方法名,传值的方法名2] 
　　// content可以解构
   // 这个为content不解构写法
　　set(props,content){ 
　　　　content.emit(传值的方法名)
　　　　content.emit(传值的方法名2,参数) // 调用
　　}
　　// content解构写法
　　set(props,{emit}){
　　　　emit(传值的方法名)
　　　　emit(传值的方法名2,参数) // 调用
　　}
}
</script>
2.使用setup语法糖
<script setup>
const emit = defineEmits([传值的方法名，传值的方法名2])
emit(传值的方法名)
emit(传值的方法名,参数) // 调用
</script>

3)父主动获取子信息：ref，子主动获取父信息：$parent

因为和vue2没区别就不再详细说明了 ，

但有一个需要注意，vue3在子组件中，需要把方法或变量暴露出来给父组件，否则父组件将无法获取到，无法使用

暴露方式：defineExpose( { 变量/方法 } )

父获取子 proxy.$refs.ref的名字.对应变量或方法

子获取父 proxy.$parent.对应变量或方法 

 

(5) computed计算属性和watch的使用

1) computed的使用，computed为计算属性，一定要return一个结果。

在return的值变化时会自动调用且重新计算并更新数据，可以主动调用，

但是只在return的值有变化时才重新计算，不然会用缓存里的值。

vue3的写法
import { computed } from 'vue'
export default defineComponent({
　　setup(){
　　　　// 默认写法
　　　　const 函数名 = computed(()=>{
　　　　　　return 值
　　　　})
　　　　// 主动更新的写法
　　　　const 函数名2 = computed(()=>{
　　　　　　// 默认写法的获取值
　　　　　　get：()=>{
　　　　　　　　return 值
　　　　　　},
　　　　　　// 主动设置
　　　　　　setter:()=>{
　　　　　　　　设置值的代码
　　　　　　}
　　　　})
　　　　return{
　　　　　　函数名,
　　　　　　函数名2
　　　　}
　　}
})
// vue2的写法 因为里面的写法都是一样的，所以主动更新的写法就不再写了
export default{
　　computed:{
　　　　函数名(){
　　　　　　return 值
　　　　}
　　}
}

2)watch的使用，watch为监听属性，监听到变量变化后调用其内函数做点什么操作，

不能主动调用，没有缓存，不一定要return。

vue3写法
import { watch,watchEffect } from 'vue'
export default defineComponent({
　　// vue3中监听变量可以是多个，所以监听变量有多种写法
　　// 1.监听一个变量：变量名
　　// 2监听多个变量可以写为：[变量1，变量2] 
　　// 3.监听对象属性的：()=>{ 对象.对象属性 }
　　watch(监听变量，(newValue，oldValue)=>{
　　　　对应操作
　　},{immediate:true,deep:true})
　　// vue3多了个watchEffect，成为watch的副作用,其与computed有点像，
　　// 但是其注中的过程，可以不需要return，用到哪个属性就监听哪个属性
　　// 每次修改变量都会执行副作用
　　watchEffect(()=>{
　　　　const 变量名 = xx  
　　　　console.log(变量名)
　　})
})

// vue2写法 监听变量的变化进行操作
export default{
　　data(){
　　　　return{
　　　　　　变量名:值
　　　　}
　　},
　　watch:{
　　　　变量名(newValue,oldValue){
　　　　　　对应操作代码
　　　　},
　　　　immediate:true, // 是否初始化就执行一次
　　　　deep:true, // 是否开启深层次监听
　　}　
}

 注意：computed是注重结果，watch是在于做点什么，所以一般纯计算的用computed，需要发送请求或者其它复杂操作的用watch

 

作者：博客园-DDjans，转载时请注明来源。

(请勿将文章用在任何商业用途，违者将承担相应法律责任)