vue2和vue3的差别之组件通信

首先vue3父组件引入子组件的方式，比vue少了一步在component中注册组件，其他是一样的

vue3父传子

父组件传递值给子组件一共就三步

第一步，定义要传递的数据（以响应式数据为例）

const message=ref('hi')

第二步，放到模版中的子组件中

<appSon :message="message"></appSon>

第三步，子组件宏函数接收

defineProps({
  message:String
})

子组件使用父组件传过来的数据

const props=defineProps({
  message:String
})
console.log(props)
console.log(props.message)

可以看到接收的数据是object，使用.来调用传递过来的数据

vue2父传子

父组件传递值给子组件也就三步

第一步，定义要传递的数据

 data(){
            return{
                goodsList:[
                    {id:1,name:'方便面',price:2.5,info:'好吃不贵'},
                    {id:2,name:'火腿肠',price:2,info:'价钱合理'},
                    {id:3,name:'鹌鹑蛋',price:4.5,info:'物美价廉'},
            ]
            }
        },

第二步，放到模板的子组件中

<MyTest :item="goodsList[1]"></MyTest>

第三步，子组件props接收

 export default {
        //接收数据
      props:['item']
    }

子组件使用item就等价于父组件使用goodList[1]

由此可见，vue2和vue3父传子的差别主要就是第三步

vue3子传父

由于子组件不能直接修改父组件的值，我们只能通过子组件调用父组件的方法，传递参数，来让父组件的方法用来修改父组件的值，来达到子组件修改父组件值的目的

第一步，定义一个需要更改的数据

const count=ref(100)

第二步，父组件定义一个可更改数据的方法

const updateCount=(c)=>{
  count.value=c
  console.log(count)
 }

第三步，模板中子组件@属性绑定上面的方法，这个属性没必要一定和方法名一致，笔者故意作区分。

 <appSon @update="updateCount"></appSon>

第四步，子组件宏编译@方法并接收

const emit=defineEmits(['update'])

第五步，触发子组件自定义事件，使用第四步接收的方法传递参数

const setCount=()=>{
  emit('update',200)
}

整个过程干了一件事情，就是emit中的实参200传递到updateCount方法中的形参c

vue2子传父

第一步同上，我们想要修改的值是price，通过摁子组件的按钮实现price--

  data(){
            return{
                goodsList:[
                    {id:1,name:'方便面',price:2.5,info:'好吃不贵'},
                    {id:2,name:'火腿肠',price:2,info:'价钱合理'},
                    {id:3,name:'鹌鹑蛋',price:4.5,info:'物美价廉'},
            ],
            }
        },

第二步同上

 change(id){
                console.log(id)
                let row=this.goodsList.find(item=>item.id===id);
                row.price--;
            }

第三步同上

<MyTest @change="change"></MyTest>

第四步触发子组件自定义事件$emit传递参数,obj为props接收的goodsList中的一项

<button @click="$emit('change',obj.id)">砍一刀</button>

整个过程干了一件事，将obj.id传给change函数

综上所述子传父，是为了使用子组件修改父组件的值，本质就是向父组件能够改变数据的函数中传参，实际具体修改还是在自家的函数里，只需要记住一句话，谁的数据谁来管

知道原理后重点还是多练几遍，尤其是子传父，有一点绕，不然很容易忘记！