爷孙组件传递数据
对于父子组件的传递数据，可以通过prop进行传递，但是如果是爷爷向孙子传递数据呢？我们需要在爸爸中定义defineProps拿到爷爷传来的数据，然后在孙子中也定义defineProps，爸爸把刚刚拿到的数据在传递给孙子。
对于爸爸来说根本用不到这些数据，只是孙子要用到。那有没有一种方法让爷爷直接传递数据给孙子呢？答案肯定是有的，这里说的是依赖注入的方法，还有一种使用vuex的方法以后再说吧。
传递数据
provide()函数有两个参数，第一个参数是注入名，第二个参数是传递的数据。通过这个函数可以把爷爷中的数据传递给孙子。
inject()函数，这个函数也有两个参数，第一个参数就是provide()函数的第一个参数，第二个参数为可选，表示爷爷没有传递数据过来时的默认值。这个函数用在孙子组件中，用于接收数据。
爷爷
父亲
孙子
爷爷传来的值{{msg}}
结果如下，可以看到在爷爷中provide把msg传递给孙子，然后孙子使用inject函数接收，把msg渲染到页面上。
数据更新的方法
孙子拿到数据后可以直接在自己的组件内更改这个数据，但是并不建议这样做。我们可以在爷爷传递数据的同时把更改数据的方法也传递过去。先在爷爷中定义一个更改函数，然后把这个函数也传递过去。
爷爷
父亲
孙子
爷爷传来的值{{msg}}
爷爷把数据和改变方法一起传了过去，孙子解构出数据和方法，当点击按钮时就触发这个改变方法从而改变数据。
本文来自互联网用户投稿，文章观点仅代表作者本人，不代表本站立场，不承担相关法律责任。如若转载，请注明出处。 如若内容造成侵权/违法违规/事实不符，请点击【内容举报】进行投诉反馈！