vue 父子组件传值方法总结(六种方法)

一.父组件传值给子组件

1.props

子组件:

 props:["name"]

父组件:

2.$parent

子组件接收:

this.$parents.msg//这个msg是父组件的msg

3.依赖注入

通过父组件提供给后代组件曝露的属性和方法

父组件:

  data(){

return{

name:"父亲的名字"

          }

  },

provide:function(){

return{

getName:this.name

              }

        }

子组件接收:

inject:["getName"]

二、 子组件传值给父组件

1.emit

自定义事件

    子组件<child>:

this.$emit("increment","我是子组件")//increment: 随便自定义的事件名称  第二个参数是传值的数据

    父组件<Father>:


      methods:{

        f1(data){

console.log(data)//打印"我是子组件"

          }

      }

2.ref

子组件 <Child>:

  data(){

return{

name:"我是子组件"

          }

        }

父组件 <Father>:

  methods:{

      this.$refs.child_id.name  //这个name是子组件的name

    }

3.终极方法

使用状态管理工具,例如Vuex

最后编辑于
©著作权归作者所有,转载或内容合作请联系作者
【社区内容提示】社区部分内容疑似由AI辅助生成,浏览时请结合常识与多方信息审慎甄别。
平台声明:文章内容(如有图片或视频亦包括在内)由作者上传并发布,文章内容仅代表作者本人观点,简书系信息发布平台,仅提供信息存储服务。

相关阅读更多精彩内容

友情链接更多精彩内容