Vue3中组件数据的传递以及更改

        Vue3中组件数据的传递以及更改，包括：父子组件之间的数据传递以及数据更改，子孙组件的数据传递以及更改

一、父子组件传递

        子组件接收父组件数据

        主要通过props来接收，然后进行使用

 父组件传递数据：

<Child :data="1111">Child>

子组件通过props进行数据接收：

 props:{
    data:{
        type:String
    }
  },

        子组件修改父组件数据

在vue中组件内的数据只能在当前组件内进行更改，单向数据流模式，所以当子组件进行父组件的数据时，我们一般通过在父组件自定义一个方法，在子组件中去触发父组件方式，从而实现数据的更改。

在父组件定义方法，将方法传递给子组件：

<Child :data="data" @changData="changData">Child>

主要通过setup里面第二个参数context上下文属性进行实现：

触发父组件传递过来的数据，可以传递参数

setup(props,context) {
    let childData = ref("我是父组件数据");
    const test=()=>{
        context.emit('changData','1')
    }
    return {
      childData,
      test
    };
  },

二、祖先组件之间的数据传递

        首先，不得不承认通过上述的父子组件通信方法也能实现祖孙组件之后的数据传递以及更改，不过不推荐，因为这样多层传递容易导致项目难以维护，建议使用Vue3提供的provide与inject实现多层组件之间的数据传递。

通过provide传递数据

provide('data',data)

通过inject接收数据

const a=inject('data')

值得一说的是，接收到的数据是响应式的，当你进行数据的更改时，祖先组件对应的数据也会进行更改。