Vue2和Vue3的emit、props、watch等知识点对比

1.props/defineProps

使用场景:

       一般当父组件需要给子组件传值的时候会用到。

        Vue2:props

vue2在父组件里引入子组件以后需要在components里面注册后再使用；

父组件
 
import SonCompnents from "./cpmponents/SonCompnents.vue"
  components: {
    SonCompnents,
  },
  data(){
     return {
      info:'个人信息'
        }
  }

子组件
props:['info'] //数组写法
props：{
 info:Stirng  //对象写法
}

Vue3:defineProps

vue3的父组件引用后直接使用即可；

父组件
 
import SonCompnents from "./cpmponents/SonCompnents.vue"
import {ref }from 'vue'
let info = ref('props传参')

子组件

2. emit/defineEmits

使用场景：

用于子组件向父组件传递信息，修改父组件传的props的值

Vue2:emit

子组件
"sendMes(name)">点击向父组件传值
 
data(){
   return{
    name:'子组件'
  }
 }
 
methods:{
   sendMes(name){
     this.$emit('getMes',name)   触发父组件绑定的getMes事件从而触发对应的方法，后面是传的参数
 
    }
}

父组件
 
"changeMes">
 
import SonComponet from '@/components/SonComponet'
 
data(){
   return(){
      name:'原本的值'
    }
  }
 
methods:{
  changeMes(name){
   this.name=name
   }
 
}

Vue3:defineEmits

子组件
"sendMes">子组件给父组件传值
 
const emits = defineEmits(["close"]);
const sendMes = ()=>{
   emits("close","传的参数") //可传可不传
}

父组件
 
"changeMes">
 
import SonComponent from '@/components/SonComponent.vue'
import {ref} from 'vue'
 
let mes = ref('原值')
const changeMes = (name)=>{
   mes.value = name 
  
}

3.watch

使用场景:

用于对数据的监听并实时做出处理；

Vue2:watch

子组件
1.监听对象的一个属性值并实时修改另一个值
    watch: {
        'form.currency': {
            handler(newValue, oldValue) {
                if (newValue == 'USD') {
                    this.currencyType = '万美元';
                } else {
                    this.currencyType = '万元';
                }
            },
            deep: true,
 
        },
        'form2.currency': {
            handler(newValue, oldValue) {
                if (newValue == 'USD') {
                    this.currencyType = '万美元';
                } else {
                    this.currencyType = '万元';
                }
            },
            deep: true
        }
    },

Vue3:watch

这里的场景是子组件是弹窗，父组件是表格，在表格中引入，点击编辑，子组件弹出框的数据随之更改；

子组件
import {ref,watch} from 'vue'
 
const props = defineProps({
   info:Obeject
})
let info = ref({})
 
当监听的值是一个对象的某个属性值时，watch的第一个参数就需要写成函数，其他直接写参数即可 
watch(
  ()=>props.info   //如果只是子组件本身的一个值 name,
  (newValue,oldValue)=>{
     if(newValue){
       form = {
         name = newValue.name
         price= newValue.price
 
      }
    } 
 },
  {     第三个对象配置watch的属性
  deep:true
  
  }
)

Vue3:watchEffect 

 watchEffect的作用是不需要指定需要监听的属性，而是监听一个回调，当回调内所使用的数据发生变化时，回调就会执行；

缺点:1.不会立刻执行(可用immediate)解决；2.获取不到newValue和oldValue；

更多知识点得参考其他教程

import {watchEffect,ref} from 'vue'
let a = ref(1)
let b = ref(1)
 
const stop  =watchEffect(()=>{
  
  console.log(a,b) 一但a或b的值发生了改变，这个打印函数就会执行 
 
})