vue父组件向子组件传递对象,vue子组件向父组件传值的三种方式

　　最近学习了vue的源代码，总结了几种vue中父子组件之间数据传输的方法。有一定的参考价值，感兴趣的朋友可以参考一下。

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

1.props event

　　父组件将道具数据传输给子组件，子组件通过触发事件将数据发送回父组件。代码如下：

　　//子组件

　　模板

　　div @ click= changeName( YYY ) { { name } }/div

　　/模板

　　脚本

　　导出默认值{

　　props:[name]，//或者props:{name:{type:String，默认： }}

　　方法：{

　　//不能在子组件中修改props数据，但应该为父组件触发事件以进行处理。

　　changeName(新名称){

　　这个。$emit(changeName ，newName)

　　}

　　}

　　}

　　/脚本

　　//父组件

　　模板

　　差异

　　子组件：name= name @ changeName= changeName /子组件

　　/div

　　/模板

　　脚本

　　从“路径”导入子组件

　　导出默认值{

　　data(){

　　返回{name:XXX}

　　},

　　组件：{

　　儿童公司

　　},

　　方法：{

　　changeName(新名称){

　　this.name=newName

　　}

　　}

　　}

　　/scritp

　　以上是一个完整的过程。父组件通过props向子组件传输数据，子组件触发事件，事件由父组件监控并相应处理。

2.ref

　　ref属性可以在子组件或本机DOM上定义。如果它在一个子组件上，它指向一个子组件实例。如果在原生DOM上，则指向原生DOM元素(可以作为元素选择，省去了querySelector的麻烦)。

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

　　//子组件

　　模板

　　div{{parentMsg}}/div

　　/模板

　　脚本

　　导出默认值{

　　data(){

　　返回{

　　parentMsg:“”

　　}

　　},

　　方法：{

　　getMsg(msg){

　　this.parentMsg=msg

　　}

　　}

　　}

　　/脚本

　　//父组件

　　模板

　　差异

　　子补偿参照=子/子补偿

　　button @click=sendMsg 发送消息/button

　　/div

　　/模板

　　脚本

　　从“路径”导入子组件

　　导出默认值{

　　组件：{

　　儿童公司

　　},

　　方法：{

　　sendMsg(){

　　这个。$refs.child.getMsg(父消息)；

　　}

　　}

　　}

　　/scritp

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

　　提供意味着提供。当一个组件通过provide提供一个数据时，它的后代可以使用inject来接收注入，这样它们就可以使用它们的祖先传递的数据。代码如下：

　　//子级

　　模板

　　div{{appName}}/div

　　/模板

　　脚本

　　导出默认值{

　　注入：[appName]

　　}

　　/脚本

　　//根

　　导出默认值{

　　data(){

　　返回{

　　appName:“测试”

　　}

　　},

　　提供：[appName]

　　}

4.vuex

　　Vue官方推荐全局状态管理插件。不细说了。

　　关于Vue中从父组件向子组件传输数据的几种方法的文章到此结束。关于在Vue中从父组件向子组件传输数据的更多信息，请搜索我们以前的文章或继续浏览下面的相关文章。希望大家以后能多多支持我们！

郑重声明：本文由网友发布，不代表盛行IT的观点，版权归原作者所有，仅为传播更多信息之目的，如有侵权请联系，我们将第一时间修改或删除，多谢。