• 设为首页
  • 点击收藏
  • 手机版
    手机扫一扫访问
    迪恩网络手机版
  • 关注官方公众号
    微信扫一扫关注
    公众号

Vue中父组件向子组件传递数据的几种方法

原作者: [db:作者] 来自: [db:来源] 收藏 邀请

最近在学习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']
}

4.vuex

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

到此这篇关于Vue中父组件向子组件传递数据的几种方法的文章就介绍到这了,更多相关Vue 父组件向子组件传递数据内容请搜索极客世界以前的文章或继续浏览下面的相关文章希望大家以后多多支持极客世界!


鲜花

握手

雷人

路过

鸡蛋
该文章已有0人参与评论

请发表评论

全部评论

专题导读
上一篇:
构建Vue3桌面应用程序的方法发布时间:2022-02-05
下一篇:
详解Vue3中Teleport的使用发布时间:2022-02-05
热门推荐
热门话题
阅读排行榜

扫描微信二维码

查看手机版网站

随时了解更新最新资讯

139-2527-9053

在线客服(服务时间 9:00~18:00)

在线QQ客服
地址:深圳市南山区西丽大学城创智工业园
电邮:jeky_zhao#qq.com
移动电话:139-2527-9053

Powered by 互联科技 X3.4© 2001-2213 极客世界.|Sitemap