vue中父子组件传递数据的方法有哪一些-群英

您现在的位置是：群英 > 开发技术 > web开发

vue中父子组件传递数据的方法有哪一些

Admin发表于 2022-11-19 17:51:52448 次浏览

上一篇： Vue中的computed属性如何使用，可以用做什么

下一篇： v-bind动态绑定属性class的方法和代码是什么

在这篇文章中我们会学习到关于“vue中父子组件传递数据的方法有哪一些”的知识，小编觉得挺不错的，现在分享给大家，也给大家做个参考，希望对大家学习或工作能有帮助。下面就请大家跟着小编的思路一起来学习一下吧。

最近在学习vue的源码，总结了几种vue中父子组件传递数据的方法。

1.props & event

父组件向子组件传递props数据，子组件通过触发事件向父组件回传数据，代码如下：

//子组件 
<template>
    <div @click="changeName('YYY')">{{name}}</div>
</template>
<script>
export default{
    props:['name'],//or props:{name:{type:String,default:''}}
    methods:{
        //不能在子组件修改props数据，应触发事件让父组件处理
        changeName(newName){
            this.$emit('changeName',newName)
        }
    }
}
</script>
 
//父组件
<template>
    <div>
        <child-comp :name="name" @changeName="changeName"></child-comp>
    </div>
</template>
<script>
    import childComp from 'path'
    export default{
        data(){
            return {name:'XXX'}
        },
        components:{
            childComp
        },
        methods:{
            changeName(newName){
                this.name = newName;
            }
        }
    }
</scritp>
 登录后复制

以上就是一个完整的流程，父组件通过props将数据传递给子组件，子组件则触发事件，由父组件监听，并做相应处理。

2.ref

ref属性可定义在子组件或原生DOM上，如果在子组件上，则指向子组件实例，如果在原生DOM上，则指向原生DOM元素（可以用做元素选择，省去querySelector的烦恼）。

传递数据的思路：在父组件内通过ref获取子组件实例，然后调用子组件方法，并传递相关数据作为参数。代码如下：

//子组件 
<template>
    <div>{{parentMsg}}</div>
</template>
<script>
export default{
    data(){
        return {
            parentMsg:''
        }
    },
    methods:{
        getMsg(msg){
            this.parentMsg = msg;
        }
    }
}
</script>
 
//父组件
<template>
    <div>
        <child-comp ref="child"></child-comp>
        <button @click="sendMsg">SEND MESSAGE</button>
    </div>
</template>
<script>
    import childComp from 'path'
    export default{
        components:{
            childComp
        },
        methods:{
            sendMsg(){
                this.$refs.child.getMsg('Parent Message');
            }
        }
    }
</scritp>
 登录后复制

3.provide & inject 官方不推荐在生产环境使用

provide意为提供，当一个组件通过provide提供了一个数据，那么它的子孙组件就可以使用inject接受注入，从而可以使用祖先组件传递过来的数据。代码如下：

//child
<template>
    <div>{{appName}}</div>
</template>
<script>
export default{
    inject:['appName']
}
</script>
 
// root 
export default{
    data(){
        return {
            appName:'Test'
        }
    },
    provide:['appName']
}

现在大家对于vue中父子组件传递数据的方法有哪一些的内容应该都清楚了吧，希望大家阅读完这篇文章能有所收获。最后，想要了解更多vue中父子组件传递数据的方法有哪一些的知识，欢迎关注群英网络，群英网络将为大家推送更多相关知识的文章。

免责声明：本站发布的内容（图片、视频和文字）以原创、转载和分享为主，文章观点不代表本网站立场，如果涉及侵权请联系站长邮箱：mmqy2019@163.com进行举报，并提供相关证据，查实之后，将立刻删除涉嫌侵权内容。

标签：父子组件传递数据

上一篇： Vue中的computed属性如何使用，可以用做什么

下一篇： v-bind动态绑定属性class的方法和代码是什么