vue父子组件传值的方法

最新推荐文章于 2026-04-22 15:46:40 发布

转载最新推荐文章于 2026-04-22 15:46:40 发布 · 1.1w 阅读

13 ·

本内容遵循CC 4.0 BY-SA版权协议

原文链接：https://blog.csdn.net/lianwenxiu/article/details/87898688

标签

#vue.js #javascript #前端

收录于

一.父组件传值给子组件
1.props

子组件<Child>:  
 
 props:["name"]
 
父组件<Father>:
 
<Child  name="小张"></Child>

2.$parent

子组件接收:
 
  this.$parent.msg     //这个msg是父组件的msg

3.依赖注入(provide,inject)

通过父组件提供给后代组件曝露的属性和方法
父组件:
  data(){
    return{
           name:"父亲的名字"
          }
  },
  provide:function(){
          return {
               getName: this.name
               }
        }
 
 子组件接收:
     inject:["getName"]

二.子组件传值给父组件
1.$emit


自定义事件
    子组件<child>:
      this.$emit("increment","我是子组件") //increment: 随便自定义的事件名称   第二个参数是传值的数据
    父组件<Father>:
      <Child @increment="f1"></Child>
      
      methods:{
        f1(data){
           console.log(data)  //打印"我是子组件"
          }
       }

2.$refs


子组件 <Child>:
   data(){
       return {
         name:"我是子组件"
           }
         }
父组件 <Father>:
   <Child ref="child_id">
   methods:{
       this.$refs.child_id.name  //这个name是子组件的name
     }

3.终极方法
使用状态管理工具,例如Vuex

· 兄弟通信： Bus；Vuex
· 跨级通信： Bus；Vuex；provide / inject；attrs/listeners
————————————————
版权声明：本文为CSDN博主「英特纳雄耐尔先生」的原创文章，遵循CC 4.0 BY-SA版权协议，转载请附上原文出处链接及本声明。
原文链接：https://blog.csdn.net/sinat_19594515/article/details/100664033