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

子组件
点击向父组件传值

data(){
   return{
    name:'子组件'
  }
 }

methods:{
   sendMes(name){
     this.$emit('getMes',name)   触发父组件绑定的getMes事件从而触发对应的方法，后面是传的参数

    }
}

父组件



import SonComponet from '@/components/SonComponet'

data(){
   return(){
      name:'原本的值'
    }
  }

methods:{
  changeMes(name){
   this.name=name
   }

}

Vue3:defineEmits

子组件
子组件给父组件传值

const emits = defineEmits(["close"]);
const sendMes = ()=>{
   emits("close","传的参数") //可传可不传
}

父组件



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的值发生了改变，这个打印函数就会执行 
 
})