侧边栏壁纸
  • 累计撰写 17 篇文章
  • 累计创建 17 个标签
  • 累计收到 1 条评论

目 录CONTENT

文章目录

VUE组件组件之间如何传参

马化云
2022-04-08 / 0 评论 / 0 点赞 / 462 阅读 / 778 字
温馨提示:
本文最后更新于 2022-04-14,若内容或图片失效,请留言反馈。部分素材来自网络,若不小心影响到您的利益,请联系我们删除。

父组件传递参数给子组件

第一种方式

<!--父组件引用子组件-->
<time-line :tableName="TableName" :id="entity.id"></time-line>

<!-- 子组件中使用props接收父组件传递来的值 -->
props: {
    tableName: '',
    id: null,
},
methods: {
 read() {
      console.log(this.tableName)
      console.log(this.id)    
    },
}  

第二种方式

<!-- 父组件引用子组件 -->
<time-line ref="timeline"></time-line>
<!--JS部分-->
this.$refs.timeline.read(record)

<!-- 子组件中使用方法接收接收父组件传递来的值 -->
methods: {
 read(record) {
      console.log(record.tableName)
      console.log(record.id)    
    },
}  

子组件传递参数给父组件

第一种方式

<!-- 父组件引用子组件 -->
<time-line  @ok="handleOK"></time-line>
<!--JS部分-->
methods: {
 handleOK(record) {
      console.log(record.tableName)
      console.log(record.id)    
    },
}  
<!-- 子组件中使用方法传值给父组件 -->
<!--JS部分-->
this.$emit('ok',record)
VUE
博主关闭了所有页面的评论