大家好，欢迎来到IT知识分享网。
最近在学习vue的源码，总结了几种vue中父子组件传递数据的方法。
1.props & event
父组件向子组件传递props数据，子组件通过触发事件向父组件回传数据，代码如下：
//子组件
{
{name}}
{name}}
//父组件
以上就是一个完整的流程，父组件通过props将数据传递给子组件，子组件则触发事件，由父组件监听，并做相应处理。
2.ref
ref属性可定义在子组件或原生DOM上，如果在子组件上，则指向子组件实例，如果在原生DOM上，则指向原生DOM元素（可以用做元素选择，省去querySelector的烦恼）。
传递数据的思路：在父组件内通过ref获取子组件实例，然后调用子组件方法，并传递相关数据作为参数。代码如下：
//子组件
{
{parentMsg}}
{parentMsg}}
//父组件
SEND MESSAGE
3.provide & inject 官方不推荐在生产环境使用
provide意为提供，当一个组件通过provide提供了一个数据，那么它的子孙组件就可以使用inject接受注入，从而可以使用祖先组件传递过来的数据。代码如下：
//child
{
{appName}}
{appName}}
// root export default{ data(){ return { appName:’Test’ } }, provide:[‘appName’] }
4.vuex
vue官方推荐的全局状态管理插件。不细说。
免责声明：本站所有文章内容,图片，视频等均是来源于用户投稿和互联网及文摘转载整编而成，不代表本站观点，不承担相关法律责任。其著作权各归其原作者或其出版社所有。如发现本站有涉嫌抄袭侵权/违法违规的内容,侵犯到您的权益，请在线联系站长,一经查实,本站将立刻删除。 本文来自网络,若有侵权，请联系删除，如若转载，请注明出处：https://yundeesoft.com/11515.html
